一段定时切换图片的JS,高手帮忙修改下,有点有关问题
一段定时切换图片的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>