來來來，手把手教你們
在漫漫的前段學(xué)習(xí)過程中何暮，輪播已經(jīng)成為必不可少的前段需求唤衫，下面我就給大家說一種超級簡單的方法實現(xiàn)無縫輪播滾動婆赠。
要求: 實現(xiàn)圖片無縫輪播
1:? 定義父級div
這個div的寬度為輪播圖片元素的寬度 ，暫時不設(shè)置高度佳励，據(jù)我了解休里，如果存在響應(yīng)式，高度會根據(jù)情況變化赃承，說多了說多了妙黍，這里先給大家說最簡單的方法實現(xiàn)無縫輪播。
在這里圖片寬度設(shè)置為200px瞧剖，, 外邊距溢出是overflow: hidden;大家都會吧
width: 200px;
overflow: hidden;
2: 在父級div下面定義一個div作為輪播圖片容器 ,并且添加動畫效果,設(shè)置屬性為
width: 800px;這里設(shè)置四張圖片寬度的總和,第四張圖片與第一張圖片相同拭嫁。
別問我為什么，寶寶脾氣不好抓于。
一言不合就會打人的做粤，我告訴你。
自定義動畫捉撮，參數(shù)我就不說了怕品，很長一串參數(shù)，這里我就不說了巾遭，自行百度肉康。
animation: keyframe 7s ease 0s infinite normal;
3: 在輪播圖片容器里面定義并統(tǒng)一每個圖片的寬度, 并且讓每個圖片排成一行:(左浮動或者設(shè)置display: inline- block)
width: 200px;
float: left; 使用這行代碼或者下面這行代碼,下面那行代碼需要消除每個img之間的間距
/*display: inline-block;*/
4: 第2步中的keyframe設(shè)置動畫幀數(shù),
? ? 0%,14% 這樣的寫法的意義在于:
? ? 從0%幀數(shù)開始輪播下一張圖片,
? ? 在14%幀數(shù)開始停止直到28%
? ? 后面的以此類推
這里設(shè)置了四段運動 (0%,14%) (28%,42%) (56%,70%) (84%,100%)
其中(84%,100%)輪播的圖片是跟第一張圖片是相同,當animation設(shè)置了noramal值后,動畫會從頭播放,
如果最后一張圖片跟第一張圖片不一樣,動畫從頭播放, 就會有切換的效果
設(shè)置最尾的圖片跟第一張相同后,當 100% ==> 到 0% 時因為圖片一樣,看不到切換的效果,相當于蒙蔽了你的眼睛
@-webkit-keyframes keyframe{
? 0%,14% { transform: translate(0px, 0)}
? 28%,42% {transform: translate(-200px, 0)}
? 56%,70% { transform: translate(-400px, 0)}
? 84%,100% {transform: translate( -600px, 0)}
}
