實(shí)現(xiàn)思路:
需求: 實(shí)現(xiàn)三張圖片無(wú)縫輪播
1:? 定義一個(gè)父級(jí)div ,
這個(gè)div的寬度為輪播圖片元素的寬度?
本文這里用的img寬度是114px, 溢出的時(shí)候設(shè)置屬 性:overflow: hidden;
width: 114px;
overflow: hidden;
2: 在這個(gè)父級(jí)div下面定義一個(gè)div作為輪播圖片容器?,并且添加動(dòng)畫(huà)效果,設(shè)置屬性為
width: calc(114px * 4);//這里設(shè)置四張圖片寬度的總和,第四張圖片與第一張圖片相同,why?往下看
animation: keyframe 7s ease 0s infinite normal;
3: 在輪播圖片容器里面定義并統(tǒng)一每個(gè)圖片的寬度, 并且讓每個(gè)圖片排成一行:(左浮動(dòng)或者設(shè)置display: inline- ? ? ?block)
width: 114px;
float: left; //使用這行代碼或者下面這行代碼,下面那行代碼需要消除每個(gè)img之間的間距
/*display: inline-block;*/
4: 第2步中的keyframe設(shè)置動(dòng)畫(huà)幀數(shù),
? ? 0%,14% 這樣的寫(xiě)法的意義在于:
? ? 從0%幀數(shù)開(kāi)始輪播下一張圖片,
? ? 在14%幀數(shù)開(kāi)始停止直到28%
? ? 后面的以此類(lèi)推
這里設(shè)置了四段運(yùn)動(dòng) (0%,14%) (28%,42%) (56%,70%) (84%,100%)
其中(84%,100%)輪播的圖片是跟第一張圖片是相同,當(dāng)animation設(shè)置了noramal值后,動(dòng)畫(huà)會(huì)從頭播放,
如果最后一張圖片跟第一張圖片不一樣,動(dòng)畫(huà)從頭播放, 就會(huì)有切換的效果
設(shè)置最尾的圖片跟第一張相同后,當(dāng) 100% ==> 到 0% 時(shí)因?yàn)閳D片一樣,看不到切換的效果,相當(dāng)于蒙蔽了你的眼睛
@-webkit-keyframes keyframe{
? 0%,14% { transform: translate(0px, 0)}
? 28%,42% {transform: translate(-114px, 0)}
? 56%,70% { transform: translate(-228px, 0)}
? 84%,100% {transform: translate( -342px, 0)}
}
全部代碼鏈接
