您好,登錄后才能下訂單哦!
項(xiàng)目要求頁(yè)面兼容IE6,7,8等瀏覽器,我們可能會(huì)遇到這個(gè)輪播效果,輪播板塊要求:無(wú)限循環(huán)、自動(dòng)輪播和手動(dòng)切換功能,每一次滾動(dòng)一小格,網(wǎng)上有很多這類插件,例如:swiper等!
但是很多都是不兼容IE6,7,8這些低級(jí)瀏覽器的,沒(méi)有辦法,只能自己寫(xiě)一個(gè)類似的輪播插件
廢話不多說(shuō),直接上代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3-20180801.min.js"></script> <style> *{margin: 0;padding: 0;} div{position: relative;width: 1000px;overflow: hidden;height: 100px;line-height:100px;} ul{position: absolute;list-style: none;overflow: hidden;} li{float: left;width: 200px;height: 100px;text-align:center;color:#fff;} a{position: absolute;color:#fff;margin:0 10px;font-size:30px;text-decoration:none;} </style> </head> <body> <div> <ul> <li >1</li> <li >2</li> <li >3</li> <li >4</li> <li >5</li> <li >6</li> <li >7</li> <li >8</li> <li >9</li> <li >10</li> <li >11</li> </ul> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="prev" >←</a> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="next" >→</a> </div> </body> <script type="text/javascript"> var fli = $("ul li").clone(true); var oul = $("ul"); oul.append(fli); oul.width($("ul li").eq(0).width()*$("ul li").length); var inow = 0; var timer = null; $("div").mouseover(function(){ clearInterval(timer); }) $("div").mouseout(function(){ autoplay(); }) $(".next").click(function(){ if(inow == $("ul li").length/2){ oul.css("left","0px"); inow = 1; }else{ inow++; } var leng = -inow*$("ul li").eq(0).width()+"px"; oul.animate({"left":leng}); }) $(".prev").click(function(){ if(inow == 0){ var ml = -$("ul li").eq(0).width()*($("ul li").length/2)+"px"; oul.css("left",ml); inow = $("ul li").length/2-1; }else{ inow--; } var leng = -inow*$("ul li").eq(0).width()+"px"; oul.animate({"left":leng}); }) function autoplay(){ timer = setInterval(function(){ if(inow == $("ul li").length/2){ oul.css("left","0px"); inow = 1; }else{ inow++; } console.log(inow); var leng = -inow*$("ul li").eq(0).width()+"px"; oul.animate({"left":leng}); },2000); } autoplay(); </script> </html>
希望這篇文章能幫到大家,喜歡技術(shù)交流的可以關(guān)注我,一起交流前端技術(shù)。感謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。