成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一直以來(lái)都沒(méi)直視的輪播

wangzy2019 / 1283人閱讀

摘要：一直以來(lái)做項(xiàng)目碰到輪播圖我都是去網(wǎng)站上找現(xiàn)成插件拿來(lái)用，現(xiàn)成的插件是省時(shí)間，拿來(lái)改改尺寸改改參數(shù)就能直接用，是現(xiàn)在的插件確實(shí)很強(qiáng)大，對(duì)于我一個(gè)剛剛學(xué)習(xí)前端的人來(lái)說(shuō)，牛人寫的輪播我看懂也要花些功夫，更別說(shuō)在工作中寫出來(lái)，估計(jì)寫出來(lái)以后，整個(gè)項(xiàng)

一直以來(lái)做項(xiàng)目碰到輪播圖我都是去網(wǎng)站上找現(xiàn)成插件拿來(lái)用，現(xiàn)成的插件1是省時(shí)間，拿來(lái)改改尺寸改改參數(shù)

就能直接用，2是現(xiàn)在的插件確實(shí)很強(qiáng)大，對(duì)于我一個(gè)剛剛學(xué)習(xí)前端的人來(lái)說(shuō)，牛人寫的輪播我看懂也要花些功夫，

更別說(shuō)在工作中寫出來(lái)，估計(jì)寫出來(lái)以后，整個(gè)項(xiàng)目都要因我延時(shí)了...

我做過(guò)的項(xiàng)目也不多，開始用的最多的就是bootstrap里面的輪播，具備最基礎(chǔ)的功能，很適合我剛開始做項(xiàng)目用，

最近我無(wú)意發(fā)現(xiàn)了一個(gè)更好用的輪播件（Swiper）這個(gè)插件在手機(jī)上有點(diǎn)意思，他可以實(shí)現(xiàn)手指觸摸拖拽，還可以

雙指進(jìn)行縮放，挺好用的，官網(wǎng)有中文的，上手挺容易的（你們還有什么好用的插件可以私信我^-^）.

好了說(shuō)正事 ，接觸前端的應(yīng)該都知道 輪播可以說(shuō)剛開始學(xué)就必須應(yīng)該

會(huì)的，不會(huì)那就太沒(méi)面子了，面試問(wèn)過(guò)我 ，我胸有成竹的敘述其實(shí)我心

里想著他要真讓我拿出電腦寫一個(gè)我還真的會(huì)蒙

今天下午有時(shí)間 ，我憑著用過(guò)這么多次的映像自己動(dòng)手寫了一個(gè)，真的是最最最最基礎(chǔ)的輪播。

 我開始想寫那種無(wú)縫的輪播，我是這么寫的



    
    
        
    • 
        
  • 
        
    • 
    

    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
    


外層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怎么弄，點(diǎn)擊它

還要跳到對(duì)應(yīng)的圖片上，想了好久

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

還有一種輪播，可能你已經(jīng)想到了 那種改變圖片透明度的輪播，我當(dāng)時(shí)想這個(gè)好寫啊，同樣能實(shí)現(xiàn)作用，于是....上碼！

主要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;
  }

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

雖然效率低，但還好的是，我下次說(shuō)我會(huì)的時(shí)候會(huì)比之

前更有底氣

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92446.html

相關(guān)文章

  • 一直以來(lái)都沒(méi)直視的輪播

    摘要：一直以來(lái)做項(xiàng)目碰到輪播圖我都是去網(wǎng)站上找現(xiàn)成插件拿來(lái)用，現(xiàn)成的插件是省時(shí)間，拿來(lái)改改尺寸改改參數(shù)就能直接用，是現(xiàn)在的插件確實(shí)很強(qiáng)大，對(duì)于我一個(gè)剛剛學(xué)習(xí)前端的人來(lái)說(shuō)，牛人寫的輪播我看懂也要花些功夫，更別說(shuō)在工作中寫出來(lái)，估計(jì)寫出來(lái)以后，整個(gè)項(xiàng) 一直以來(lái)做項(xiàng)目碰到輪播圖我都是去網(wǎng)站上找現(xiàn)成插件拿來(lái)用，現(xiàn)成的插件1是省時(shí)間，拿來(lái)改改尺寸改改參數(shù) 就能直接用，2是現(xiàn)在的插件確實(shí)很強(qiáng)大，對(duì)于我一...

    FuisonDesign 評(píng)論0 收藏0

  • JavaScript精編干貨

    摘要：老姚淺談怎么學(xué)鑒于時(shí)不時(shí)，有同學(xué)私信問(wèn)我老姚，下同怎么學(xué)前端的問(wèn)題。擼碼聽歌，全局控制。 淺析用 js 解析 xml 的方法 由于項(xiàng)目上需要解析 xml，于是各種百度，然后自己總結(jié)了下各個(gè)主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒(méi)有深層次的研究。 裝 X - 建立自己的斗圖網(wǎng)站庫(kù) 之前加過(guò)一個(gè)斗圖群，看到很多經(jīng)典的表情，然后就收藏到了 QQ， 迫于本屌絲開不起...

    Fourierr 評(píng)論0 收藏0

  • 回顧自己三次失敗的面試經(jīng)歷

    摘要：站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時(shí)間的齒輪已經(jīng)來(lái)到了2017年的11月份，距離2018年僅僅還剩下不到兩...

    DC_er 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<