Verwenden Sie CSS3, um eine nahtlose Karussellfunktion zu erreichen

Dieser Artikel führt Sie anhand von Beispielcode in den nahtlosen Karusselleffekt ein, der auf CSS3 basiert. Der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert.

Nahtlos Karussell Schematische Darstellung von

1. HTML-Struktur:

<p class="layout">
    <p 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>
    </p>
</p>

JavaScript :

/*轮播图*/
function banner() {
    var banner = document.querySelector('.banner');
    /*获取设备宽度*/
    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';
    }
    /*设置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);
        //同步设置css
        //底层异步操作
    }, 2000);
    transVar.transitionEnd(imageBox, function () { //监听每一次动画的结束
        if (index >= 9) { // 当轮播到第9张的时候,无缝切换到第1张图片
            index = 1;
            // 清除过渡
            removeTransition();
            //无动画效果的定位到第一张图片
            setTranslateX(-index * offsetWidth);
        } 
    });
  }

JavaScript: Warten auf das Endereignis der Animation

window.transVar = {};   //定义一个window的全局对象
//监听css3过渡动画的结束事件
transVar.transitionEnd = function(obj,callback){
    if (typeof  obj == 'object'){
        obj.addEventListener('webkitTransitionEnd',function(){  // 兼容写法
            callback && callback();  // && 运算符 , 如果callback函数存在,则调用callback()函数
        })
        obj.addEventListener('transitionEnd',function(){
            callback && callback();
        })
    }
}

Zusammenfassung: Wird verwendet CSS3 Bei der Implementierung eines nahtlosen Karussells hatte ich zu Beginn Probleme damit, nahtlos zum ersten Bild zu wechseln.

Direkt beurteilen, ob das erste Bild während des Karussellvorgangs erreicht wurde Bilder, rufe dann „removeTransition();“ auf, um den Übergang abzubrechen, und ändere dann „index=1“, um nahtlos zum ersten Bild zu wechseln, als ich sicher war, dass es fertig war!!!

var timer = setInterval(function () {
        index++;
        addTransition();
        setTranslateX(-index * offsetWidth);
        if (index >= 9) {   // 当轮播到第9张时,不调用监听动画事件,直接取消过渡状态
            removeTransition();
            index = 1;
            setTranslateX(-index * offsetWidth);
        } 
    }, 2000);

Also….was ist der Grund?

Weil der CSS3-Übergang ein asynchrones Ereignis ist, wurde mir zu diesem Zeitpunkt plötzlich klar: Erst dann Habe ich meine Jugend und Unwissenheit erkannt?

Da es sich also um ein asynchrones Ereignis handelt, müssen wir das Listening-Ereignis verwenden, um das Ende jedes Übergangszustands zu überwachen,

und dann den aktuellen Index beurteilen Unabhängig davon, ob das letzte Bild erreicht ist, wechselt

zum ersten Bild ohne Animation.

Dies ist die vollständige Verwendung von CSS3, um ein nahtloses Karussell zu erreichen Wenn Sie es selbst lösen, werden Sie dieses Problem langsam und natürlich nicht mehr haben. Lassen Sie uns weiter hart arbeiten Ich hoffe, dass dieser Artikel für alle hilfreich ist. Bitte achten Sie auf die chinesische PHP-Website, um weitere verwandte Inhalte zu erhalten!

Verwandte Empfehlungen:

Verwenden von CSS3, um den rotierenden Laterneneffekt zu erzielen

Über CSS, das ein Hintergrundbild zum Erstellen eines verwendet Navigationsmenü Implementierungsideen

So verwenden Sie CSS3, um den Effekt zu erzielen, dass das aktuelle Licht und andere grau werden, wenn die Maus hinein bewegt wird

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um eine nahtlose Karussellfunktion zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!