只有第一個選項卡可以圖片自動滑動，可是其他的不行，哪里有問題？怎么實現鼠標點到哪個選項卡，對應的圖片就自動滑動。或者能夠第一個選項卡的圖片展示完后，自動跳到下一個選項卡呢？<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>
怎么可以實現tab選項卡加上圖片自動滑動？
慕粉1002408426
2019-03-27 21:10:44