摘要:一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用,現成的插件是省時間,拿來改改尺寸改改參數就能直接用,是現在的插件確實很強大,對于我一個剛剛學習前端的人來說,牛人寫的輪播我看懂也要花些功夫,更別說在工作中寫出來,估計寫出來以后,整個項
一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用,現成的插件1是省時間,拿來改改尺寸改改參數
就能直接用,2是現在的插件確實很強大,對于我一個剛剛學習前端的人來說,牛人寫的輪播我看懂也要花些功夫,
更別說在工作中寫出來,估計寫出來以后,整個項目都要因我延時了...
我做過的項目也不多,開始用的最多的就是bootstrap里面的輪播,具備最基礎的功能,很適合我剛開始做項目用,
最近我無意發現了一個更好用的輪播件(Swiper)這個插件在手機上有點意思,他可以實現手指觸摸拖拽,還可以
雙指進行縮放,挺好用的,官網有中文的,上手挺容易的(你們還有什么好用的插件可以私信我^-^).
好了說正事 ,接觸前端的應該都知道 輪播可以說剛開始學就必須應該
會的,不會那就太沒面子了,面試問過我 ,我胸有成竹的敘述其實我心
里想著他要真讓我拿出電腦寫一個我還真的會蒙
今天下午有時間 ,我憑著用過這么多次的映像自己動手寫了一個,真的是最最最最基礎的輪播。
我開始想寫那種無縫的輪播,我是這么寫的
- 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怎么弄,點擊它
還要跳到對應的圖片上,想了好久
我放棄了,(日后我會解決得)
還有一種輪播,可能你已經想到了 那種改變圖片透明度的輪播,我當時想這個好寫啊,同樣能實現作用,于是....上碼!
主要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
摘要:一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用,現成的插件是省時間,拿來改改尺寸改改參數就能直接用,是現在的插件確實很強大,對于我一個剛剛學習前端的人來說,牛人寫的輪播我看懂也要花些功夫,更別說在工作中寫出來,估計寫出來以后,整個項 一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用,現成的插件1是省時間,拿來改改尺寸改改參數 就能直接用,2是現在的插件確實很強大,對于我一...
摘要:老姚淺談怎么學鑒于時不時,有同學私信問我老姚,下同怎么學前端的問題。擼碼聽歌,全局控制。 淺析用 js 解析 xml 的方法 由于項目上需要解析 xml,于是各種百度,然后自己總結了下各個主流瀏覽器解析 xml 的方法,只能是很淺顯的知道他的用法,但是還沒有深層次的研究。 裝 X - 建立自己的斗圖網站庫 之前加過一個斗圖群,看到很多經典的表情,然后就收藏到了 QQ, 迫于本屌絲開不起...
摘要:站在這個時間點上,我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷,依然是與輪播圖有關。當然,這次思特奇面試之旅,最后也是以失敗告終,這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經來到了2017年的11月份,距離2018年僅僅還剩下不到兩...
閱讀 2486·2021-11-15 18:14
閱讀 1711·2021-10-14 09:42
閱讀 3746·2021-10-11 10:58
閱讀 3939·2021-10-09 09:44
閱讀 2410·2021-09-26 09:55
閱讀 2430·2021-09-24 10:38
閱讀 2025·2021-09-04 16:48
閱讀 3268·2021-09-02 15:21