只有第一個(gè)選項(xiàng)卡可以圖片自動(dòng)滑動(dòng)，可是其他的不行，哪里有問題？怎么實(shí)現(xiàn)鼠標(biāo)點(diǎn)到哪個(gè)選項(xiàng)卡，對(duì)應(yīng)的圖片就自動(dòng)滑動(dòng)?；蛘吣軌虻谝粋€(gè)選項(xiàng)卡的圖片展示完后，自動(dòng)跳到下一個(gè)選項(xiàng)卡呢？<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>學(xué)習(xí)練手寫下個(gè)簡(jiǎn)易的滑動(dòng)門</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下的所有l(wèi)i oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;//li下的內(nèi)容進(jìn)行想加 oUl.style.width = Li[0].offsetWidth*Li.length+'px';//ul的寬度等于每個(gè)li的寬度乘以所有l(wèi)i的長(zhǎng)度 var speed = 2 //主方法 function move(){ //如果左邊橫向滾動(dòng)了長(zhǎng)度一半之后,回到初始位置 if(oUl.offsetLeft<-oUl.offsetWidth/speed){ oUl.style.left = '0' } //如果右邊橫向滾動(dòng)的距離大于0 就讓他的位置回到一半 if(oUl.offsetLeft>0){ oUl.style.left = -oUl.offsetWidth/speed+'px';? } //oUl.style.left = oUl.offsetLeft-2+'px';//進(jìn)行左橫向滾動(dòng) oUl.style.left = oUl.offsetLeft+speed+'px';//進(jìn)行右橫向滾動(dòng) } //調(diào)用方法 var timer = setInterval(move,30) //鼠標(biāo)指向的時(shí)候 暫停 oDiv.onmouseover=function(){ clearInterval(timer); } //鼠標(biāo)離開之后 繼續(xù)滾動(dòng) oDiv.onmouseout=function(){ timer = setInterval(move,30) } } </script></body></html>
怎么可以實(shí)現(xiàn)tab選項(xiàng)卡加上圖片自動(dòng)滑動(dòng)？
慕粉1002408426
2019-03-27 21:10:44