一段定时切换图片的JS,高手帮忙修改下,有点问题。
HTML code
<html>
<head >
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(document).ready(function () {
//轮换(鼠标移上去切换)
var divRepeater = $("#divRepeater");
var objUls = divRepeater.find("ul");
var objLinks = divRepeater.find("div>a");
//全部隐藏
objUls.hide();
//显示第一个
objUls.eq(0).show();
objLinks.each(function (i) {
var numBaseClass = "Number0";
var tempAObj = objLinks.eq(i);
var tempUObj = objUls.eq(i);
tempAObj.bind("mouseover", function () {
//把全部设为这个样式
ResetNumClass(objLinks);
//设当前样式
tempAObj.attr("class", numBaseClass + tempAObj.html());
//全部隐藏
objUls.hide();
//显示当前的
tempUObj.show();
});
});
//调用定时切换
ToggleProduct();
});
//定时切换(自动切换)
function ToggleProduct() {
var divRepeater = $("#divRepeater");
var objUls = divRepeater.find("ul");
var objLinks = divRepeater.find("div>a");
//全部隐藏
objUls.hide();
//显示第一个
objUls.eq(0).show();
objLinks.each(function (i) {
//alert("图片切换"); //这句话注释后就不能自动切换,取消注释每次弹出框后能切换一次。
var numBaseClass = "Number0";
var tempAObj = objLinks.eq(i);
var tempUObj = objUls.eq(i);
//把全部设为这个样式
ResetNumClass(objLinks);
//设置当前样式
tempAObj.attr("class", numBaseClass + tempAObj.html());
//全部隐藏
objUls.hide();
//显示当前的
tempUObj.show();
});
setTimeout("ToggleProduct()", 2000); //每2秒执行一次
}
//重置所有样式
function ResetNumClass(objLinks) {
var numBaseClass = "Number00";
objLinks.each(function (i) {
var tempAObj = objLinks.eq(i);
tempAObj.attr("class", numBaseClass + tempAObj.html());
});
}
</script>
<body>
<div class="rxcp left" id="divRepeater">
<ul id="Rul_1" style="display: block; margin-top: 20px;">
<li class="floatImages left"><a href="products_id01.aspx?id=6&typeid=52"
target="_blank">
<img src="UploadFile/ProductImages/small/201205180335243264.jpg" title="“芙蓉”纳米负离子荷叶哑光墙面漆 "
height="96" width="76" /></a></li>
<li class="hTitle"><a href="products_id01.aspx?id=6&typeid=52"
target="_blank" title="“芙蓉”纳米负离子荷叶哑光墙面漆 ">
“芙蓉”纳米负离子荷叶哑...</a></li>
<li class="hContent">
美国防伪包装、具有荷叶般的疏水效果、覆盖细微裂纹、丝绸质感、释放负离子、净化空气、污渍易清洗;耐擦洗...<a href="products_id01.aspx?id=6&typeid=52"
target="_blank" title="">[详情]</a></li>
</ul>
<ul id="Rul_2" style="display: block; margin-top: 20px;">
<li class="floatImages left"><a href="products_id01.aspx?id=5&typeid=52"
target="_blank">
<img src="UploadFile/ProductImages/small/201205180334108183.jpg" title="“儿童乐”全效合一纳米负离子荷叶哑光墙面漆"
height="96" width="76" /></a></li>
<li class="hTitle"><a href="products_id01.aspx?id=5&typeid=52"
target="_blank" title="“儿童乐”全效合一纳米负离子荷叶哑光墙面漆">
“儿童乐”全效合一纳米负...</a></li>
<li class="hContent">
美国防伪包装、具有荷叶般的疏水效果、覆盖细微裂纹、豪华典雅、释放负离子、净化空气、污渍易清洗<a href="products_id01.aspx?id=5&typeid=52"
target="_blank" title="">[详情]</a></li>
</ul>
<ul id="Rul_3" style="display: block; margin-top: 20px;">
<li class="floatImages left"><a href="products_id01.aspx?id=4&typeid=52"
target="_blank">
<img src="UploadFile/ProductImages/small/20120518033232470.jpg" title="全效合一纳米负离子荷叶儿童内墙抗碱封闭底漆"
height="96" width="76" /></a></li>
<li class="hTitle"><a href="products_id01.aspx?id=4&typeid=52"
target="_blank" title="全效合一纳米负离子荷叶儿童内墙抗碱封闭底漆">
全效合一纳米负离子荷叶儿...</a></li>
<li class="hContent">
遮盖率强、节约面漆用量、极佳的封闭性、具有防潮功效<a href="products_id01.aspx?id=4&typeid=52"
target="_blank" title="">[详情]</a></li>
</ul>
<ul id="Rul_4" style="display: block; margin-top: 20px;">
<li class="floatImages left"><a href="products_id01.aspx?id=3&typeid=52"
target="_blank">
<img src="UploadFile/ProductImages/small/201205180328173759.jpg" title="“月明千里”活性氧吧耐墨水哑光墙面漆"
height="96" width="76" /></a></li>
<li class="hTitle"><a href="products_id01.aspx?id=3&typeid=52"
target="_blank" title="“月明千里”活性氧吧耐墨水哑光墙面漆">
“月明千里”活性氧吧耐墨...</a></li>
<li class="hContent">
轻易祛除墙面墨水及污渍、极佳的流平性、开罐效果好、漆膜平滑细腻<a href="products_id01.aspx?id=3&typeid=52"
target="_blank" title="">[详情]</a></li>
</ul>
<div class="productsNum">
<a href="javascript:;" class="Number01">1</a><a href="javascript:;" class="Number002">2</a><a
href="javascript:;" class="Number003">3</a><a href="javascript:;" class="Number004">4</a></div>
<!--新品推荐 End-->
</div>
</body>
</html>