首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

一段定时切换图片的JS,高手帮忙修改下,有点有关问题

2012-05-27 
一段定时切换图片的JS,高手帮忙修改下,有点问题。HTML codehtmlhead script srcScripts/jquery-1.7.

一段定时切换图片的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> 



现在鼠标移上去切换正常,但自动切换不能正常执行,不知问题出在哪里。

[解决办法]
JScript code
            objLinks.each( function(i) {                //遍历查找当前显示的ul                if (objLinks.eq(i).attr("class").length == 8) {                    objLinks.eq(i).attr("class", "Number00" + objLinks.eq(i).html()); //修改当前样式                    objUls.hide(); //隐藏全部                    var nextIndex = (i + 1) % objUls.size();                    objLinks.eq(nextIndex).attr("class", "Number0" + objLinks.eq(nextIndex).html()); //修改下个链接样式                    objUls.eq(nextIndex).show(); //显示                    return false; //终止遍历                }            }); 

热点排行
Bad Request.