原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換)

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:30:02

原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換)

原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換):本文給大家介紹原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換) ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。項(xiàng)目要求頁面兼容IE6,7,8等瀏覽器，我們可能會(huì)遇到這個(gè)輪播效果，輪播板塊要求：無限循環(huán)、自動(dòng)輪播和手動(dòng)切換功能

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換):本文給大家介紹原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換) ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。項(xiàng)目要求頁面兼容IE6,7,8等瀏覽器，我們可能會(huì)遇到這個(gè)輪播效果，輪播板塊要求：無限循環(huán)、自動(dòng)輪播和手動(dòng)切換功能

本文給大家介紹原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換) ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。

項(xiàng)目要求頁面兼容IE6,7,8等瀏覽器，我們可能會(huì)遇到這個(gè)輪播效果，輪播板塊要求：無限循環(huán)、自動(dòng)輪播和手動(dòng)切換功能，每一次滾動(dòng)一小格，網(wǎng)上有很多這類插件，例如:swiper等！

但是很多都是不兼容IE6,7,8這些低級(jí)瀏覽器的，沒有辦法，只能自己寫一個(gè)類似的輪播插件

廢話不多說，直接上代碼:

<!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 style="background: red;">1</li>
 <li style="background: yellow;">2</li>
 <li style="background: blue;">3</li>
 <li style="background: black;">4</li>
 <li style="background: green;">5</li>
 <li style="background: orange;">6</li>
 <li style="background: skyblue;">7</li>
 <li style="background: blue;">8</li>
 <li style="background: green;">9</li>
 <li style="background: orange;">10</li>
 <li style="background: skyblue;">11</li>
 </ul>
 <a href="javascript:void(0)" class="prev" style="left:0px;">←</a>
 <a href="javascript:void(0)" class="next" style="right:0px;">→</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ù)。

總結(jié)：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：切換瀏覽器輪播

熱門焦點(diǎn)

原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換)

原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換)

原生JS編寫兼容IE6,7,8瀏覽器無縫自動(dòng)輪播(帶按鈕切換)

最新推薦

猜你喜歡

熱門推薦