摘要：一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用，現成的插件是省時間，拿來改改尺寸改改參數就能直接用，是現在的插件確實很強大，對于我一個剛剛學習前端的人來說，牛人寫的輪播我看懂也要花些功夫，更別說在工作中寫出來，估計寫出來以后，整個項
一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用，現成的插件1是省時間，拿來改改尺寸改改參數
就能直接用，2是現在的插件確實很強大，對于我一個剛剛學習前端的人來說，牛人寫的輪播我看懂也要花些功夫，
更別說在工作中寫出來，估計寫出來以后，整個項目都要因我延時了...
我做過的項目也不多，開始用的最多的就是bootstrap里面的輪播，具備最基礎的功能，很適合我剛開始做項目用，
最近我無意發現了一個更好用的輪播件（Swiper）這個插件在手機上有點意思，他可以實現手指觸摸拖拽，還可以
雙指進行縮放，挺好用的，官網有中文的，上手挺容易的（你們還有什么好用的插件可以私信我^-^）.
好了說正事 ，接觸前端的應該都知道 輪播可以說剛開始學就必須應該
會的，不會那就太沒面子了，面試問過我 ，我胸有成竹的敘述其實我心
里想著他要真讓我拿出電腦寫一個我還真的會蒙
今天下午有時間 ，我憑著用過這么多次的映像自己動手寫了一個，真的是最最最最基礎的輪播。
我開始想寫那種無縫的輪播，我是這么寫的
外層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;
}
就這段復用性賊差，處理效率賊低的代碼我寫了半天，
雖然效率低，但還好的是，我下次說我會的時候會比之
前更有底氣
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112994.html
