利用 CSS3 實現(xiàn)的無縫輪播功能代碼
發(fā)布時間：2017-09-25 09:20:08 作者：佚名 
我要評論
我要評論本文通過實例代碼給大家介紹了基于css3實現(xiàn)的無縫輪播效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
無縫輪播的原理圖
1 . html的架構(gòu) :
<div class="layout">
<div class="jd_banner">
<ul class="clearfix">
<li><a href="#"><img src="images/l1.jpg"></a></li>
<li><a href="#"><img src="images/l2.jpg"></a></li>
<li><a href="#"><img src="images/l3.jpg"></a></li>
<li><a href="#"><img src="images/l4.jpg"></a></li>
<li><a href="#"><img src="images/l5.jpg"></a></li>
<li><a href="#"><img src="images/l6.jpg"></a></li>
<li><a href="#"><img src="images/l7.jpg"></a></li>
<li><a href="#"><img src="images/l8.jpg"></a></li>
<li><a href="#"><img src="images/l1.jpg"></a></li>
</ul>
</div>
</div>
JavaScript:
/*輪播圖*/
function banner() {
var banner = document.querySelector('.banner');
/*獲取設(shè)備寬度*/
var offsetWidth = banner.offsetWidth;
/*圖片容器*/
var imageBox = banner.querySelector('ul:first-child');
/*給圖片容器添加過渡動畫屬性*/
function addTransition() {
imageBox.style.transition = 'all 0.5s';
imageBox.style.webkitTransition = 'all 0.5s';
}
/*清除圖片容器添加過渡動畫屬性*/
function removeTransition() {
imageBox.style.transition = 'none';
imageBox.style.webkitTransition = 'none';
}
/*設(shè)置X軸定位*/
function setTranslateX(offsetX) {
imageBox.style.transform = 'translateX(' + offsetX + 'px)';
imageBox.style.webkitTransform = 'translateX(' + offsetX + 'px)';
}
// 定義當前索引
var index = 1;
// 自動輪播
var timer = setInterval(function () {
index++;
addTransition();
setTranslateX(-index * offsetWidth);
//同步設(shè)置css
//底層異步操作
}, 2000);
transVar.transitionEnd(imageBox, function () { //監(jiān)聽每一次動畫的結(jié)束
if (index >= 9) { // 當輪播到第9張的時候,無縫切換到第1張圖片
index = 1;
// 清除過渡
removeTransition();
//無動畫效果的定位到第一張圖片
setTranslateX(-index * offsetWidth);
}
});
}
JavaScript : 監(jiān)聽動畫結(jié)束事件
window.transVar = {}; //定義一個window的全局對象
//監(jiān)聽css3過渡動畫的結(jié)束事件
transVar.transitionEnd = function(obj,callback){
if (typeof obj == 'object'){
obj.addEventListener('webkitTransitionEnd',function(){ // 兼容寫法
callback && callback(); // && 運算符 , 如果callback函數(shù)存在,則調(diào)用callback()函數(shù)
})
obj.addEventListener('transitionEnd',function(){
callback && callback();
})
}
}
小結(jié) : 在利用CSS3實現(xiàn)無縫輪播時,一開始一直在糾結(jié)怎樣做到無縫切換到第一張, 當初有一個比較單純的想法
想著在輪播的過程中,直接判斷是否到了第9張圖片,然后調(diào)用removeTransition();取消過渡 , 然后改變index=1,讓它無縫切換到第1張, 正當我信心滿滿以為完成了,卻結(jié)果卻給了我一巴掌!!!!!!
var timer = setInterval(function () {
index++;
addTransition();
setTranslateX(-index * offsetWidth);
if (index >= 9) { // 當輪播到第9張時,不調(diào)用監(jiān)聽動畫事件,直接取消過渡狀態(tài)
removeTransition();
index = 1;
setTranslateX(-index * offsetWidth);
}
}, 2000);
那么….原因到底是為什么呢 ?
因為 CSS3的過渡是異步事件, 那時候的我恍然大悟,才意識到了自己的年少無知.
那么既然是異步事件, 我們就需要利用監(jiān)聽事件,來監(jiān)聽每一次過渡狀態(tài)結(jié)束的時候,
然后再判斷當前的下標是否到了最后一張,
再無動畫狀態(tài)的切換到第1張.
這就是完整是利用CSS3實現(xiàn)無縫輪播 , 平時多踩坑,然后通過自己研究解決,慢慢的自然而然的就不會犯這種問題了,前端的路漫漫,讓我們繼續(xù)加油!!!!!
相關(guān)文章
jQuery css3實現(xiàn)響應(yīng)式圖文卡片滾動輪播特效
這是一款jquery和css3響應(yīng)式卡片圖文列表輪播布局?；趏wl-carousel圖片滾動插件，通過bootstrap制作響應(yīng)式卡片布局，組成炫酷的圖文卡片輪播特效。感興趣的朋友前來下載2019-05-15- 這篇文章主要介紹了CSS3簡易切割輪播圖的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2020-12-09
- 輪播圖，網(wǎng)頁上經(jīng)常能看得見，畫面比較精美，下面是純CSS3的輪播圖的一種，感興趣的朋友一起看看吧2019-11-11
本文給大家分享CSS3實現(xiàn)列表無限滾動/輪播效果，實現(xiàn)思路大概是將當前列表滾動至最后一項的末尾，然后瞬間切換回第一項，怎么實現(xiàn)無限輪播效果，下面小編給大家?guī)砹藢崿F(xiàn)2021-06-22
