只有第一个选项卡可以图片自动滑动，可是其他的不行，哪里有问题？怎么实现鼠标点到哪个选项卡，对应的图片就自动滑动。或者能够第一个选项卡的图片展示完后，自动跳到下一个选项卡呢？<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>学习练手写下个简易的滑动门</title><script src="js/jquery.min.js"></script><style>*{box-sizing:border-box;}#nav{height:50px;}#nav a{display:block;height:50px;line-height:50px;padding:0 15px;font-size:18px;text-align:center;font-family: 'Microsoft YaHei';float:left;background- color:#e1e1e1;cursor:pointer;}#nav a.on{border-bottom:2px solid #e60012;}#contentBox{width:880px;height:100px;}#contentBox .box{text-align:center;line-height:100px;font-size:24px;font-weight:blod;display:none;}#contentBox .box.active{display:block;} #div1{ width: 712px; height: 108px; margin: 100px auto; position: relative; overflow: hidden; } #div1 ul{ position:absolute; left: 0; top: 0; } #div1 ul li{ float: left; width: 178px; height: 108px; list-style: none; margin-left: 10px; }</style> </head> <body> <section> <nav id="nav"> <a class="on">tab1</a> <a>tab2</a> <a>tab3</a> <a>tab4</a> </nav> <div id="contentBox"> <div class="box active"> <div id="div1"> <ul> <li><img src="img/logo-black.png" alt=""></li> <li><img src="img/logo-black.png" alt=""></li> <li><img src="img/logo-black.png" alt=""></li> <li><img src="img/logo-black.png" alt=""></li> </ul> </div> </div> <div class="box"> <div id="div1"> <ul> <li><img src="img/logo-black.png" alt=""></li> <li><img src="img/logo-black.png" alt=""></li> <li><img src="img/logo-black.png" alt=""></li> <li><img src="img/logo-black.png" alt=""></li> </ul> </div> </div> <div class="box"><div id="div1"><ul><li><img src="img/logo-black.png" alt=""></li><li><img src="img/logo-black.png" alt=""></li><li><img src="img/logo-black.png" alt=""></li><li><img src="img/logo-black.png" alt=""></li></ul></div></div> <div class="box"><div id="div1"><ul><li><img src="img/logo-black.png" alt=""></li><li><img src="img/logo-black.png" alt=""></li><li><img src="img/logo-black.png" alt=""></li><li><img src="img/logo-black.png" alt=""></li></ul></div></div> </div></section> <script> $(function(){ $("#nav a").off("click").on("click",function(){ var index = $(this).index(); $(this).addClass("on").siblings().removeClass("on"); $("#contentBox .box").eq(index).addClass("active").siblings().removeClass("active"); }); }); </script> <script> window.onload=function(){ var oDiv = document.getElementById('div1'); var oUl = document.getElementsByTagName('ul')[0]; var Li = oUl.getElementsByTagName('li');//获取ul下的所有li oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;//li下的内容进行想加 oUl.style.width = Li[0].offsetWidth*Li.length+'px';//ul的宽度等于每个li的宽度乘以所有li的长度 var speed = 2 //主方法 function move(){ //如果左边横向滚动了长度一半之后,回到初始位置 if(oUl.offsetLeft<-oUl.offsetWidth/speed){ oUl.style.left = '0' } //如果右边横向滚动的距离大于0 就让他的位置回到一半 if(oUl.offsetLeft>0){ oUl.style.left = -oUl.offsetWidth/speed+'px'; } //oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动 oUl.style.left = oUl.offsetLeft+speed+'px';//进行右横向滚动 } //调用方法 var timer = setInterval(move,30) //鼠标指向的时候 暂停 oDiv.onmouseover=function(){ clearInterval(timer); } //鼠标离开之后 继续滚动 oDiv.onmouseout=function(){ timer = setInterval(move,30) } } </script></body></html>
添加回答
举报
0/150
提交
取消