? ?一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用，現成的插件1是省時間，拿來改改尺寸改改參數就能直接用，2是現在的插件確實很強大，對于我一個剛剛學習前端的人來說，牛人寫的輪播我看懂也要花些功夫，更別說在工作中寫出來，估計寫出來以后，整個項目都要因我延時了...

????我做過的項目也不多，開始用的最多的就是bootstrap里面的輪播，具備最基礎的功能，很適合我剛開始做項目用，最近我無意發現了一個更好用的輪播件（Swiper）這個插件在手機上有點意思，他可以實現手指觸摸拖拽，還可以雙指進行縮放，挺好用的，官網有中文的，上手挺容易的（你們還有什么好用的插件可以私信我^-^）.

????好了說正事 ，接觸前端的應該都知道 輪播可以說剛開始學就必須應該

會的，不會那就太沒面子了，面試問過我 ，我胸有成竹的敘述其實我心

里想著他要真讓我拿出電腦寫一個我還真的會蒙

????今天下午有時間 ，我憑著用過這么多次的映像自己動手寫了一個，真的是

最最最最基礎的輪播。

????我開始想寫那種無縫的輪播，我是這么寫的

<div id="slider">
<ul class="main">
<li><img src="img/banner1.jpg"></li>
<li><img src="img/banner2.jpg"</li>
<li><img src="img/banner3.jpg"></li>
</ul>
<ul class="index">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

外層slider{width:500px;height:400px;position:relative;overflow：hidden；}，

.main{ float:left;width:1500px;position:absolute;left:0;top:0;transition:all linear?.5s} //一張圖片寬500px;

.mian>li{ float：left；}

像這樣：

然后改變.main的left就可以了；我開始是這么想的，也這么做了，輪也能輪了，但是輪播圖上index怎么弄，點擊它還要跳到對應的圖片上，想了好久

我放棄了，(日后我會解決得)

????還有一種輪播，可能你已經想到了 那種改變圖片透明度的輪播，我當時想這個好寫啊，同樣能實現作用，于是....上碼！

主要css

?

.main>li{
position: absolute;
top:0;
left: 0;
opacity: 0;
transition: all linear .5s;
}//三張疊放在一起

.main .active{
opacity: 1;
} .index .active{
width:12px;
height:12px;
border-radius: 12px;
background-color: red;
} <script>
var i = 1;
$('.main>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//img
? ?$('.index>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//index
? ?var timer = setInterval(function () {
animate();
},1000);
// ? ?放在對應序號上,切換對應圖片
? ?$('.index>li').on('mouseenter',
function(){
var index = $(this).html();
$('.main>li:nth-child('+index+')')
.addClass('active').siblings('.active')
.removeClass('active');//img

? ?$('.index>li:nth-child('+index+')')
.addClass('active').siblings('.active')
.removeClass('active');//index
? ?});
// ? ?鼠標進入停止出來啟動
? ?$('#slider').hover(
function(){clearInterval(timer);},
function(){ timer = setInterval(
function(){ animate() },1000);}
);
// ? ?主體函數
? ?function animate(){
++i;
$('.main>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//img
? ? ? ?$('.index>li:nth-child('+i+')')
.addClass('active').siblings('.active')
.removeClass('active');//index
? ? ? ?if(i==3){i=0}
};
</script>

????就這段復用性賊差，處理效率賊低的代碼我寫了半天，

雖然效率低，但還好的是，我下次說我會的時候會比之

前更有底氣

?

? ???

?

微信公眾號：web小小白?

轉載于:https://www.cnblogs.com/yzb23/p/6479738.html

總結

以上是生活随笔為你收集整理的一直以来都没直视的轮播-_-的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。