Utilisez CSS3 pour obtenir une fonction de carrousel transparente

Cet article vous présente l'effet carrousel transparent basé sur CSS3 à travers un exemple de code. Le code est simple et facile à comprendre, très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Sans couture. carrousel Diagramme schématique de

1. Structure HTML :

<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 : Écoutez l'événement de fin d'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();
        })
    }
}

Résumé : Lorsque j'utilisais CSS3 pour créer un carrousel transparent, j'avais du mal à passer de manière transparente à la première image au début, j'avais une idée relativement simple

et j'y ai réfléchi pendant le processus. processus carrousel. , déterminez directement si la 9ème image a été atteinte, puis appelez removeTransition(); annulez la transition, puis modifiez index=1 pour la faire passer de manière transparente à la 1ère image juste au moment où j'étais sûr qu'elle était terminée. , le résultat m'a été donné une claque !!!!!!

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

Alors….quelle est la raison ?

Parce que la transition CSS3 est un événement asynchrone, à ce moment-là, j'ai soudain réalisé que j'étais jeune et ignorant.

Donc, puisqu'il s'agit d'un événement asynchrone, nous devons utiliser des événements de surveillance pour surveiller la fin de chaque état de transition,

Ensuite, il détermine si l'indice actuel a atteint le dernier, puis passe au premier sans animation

Cela utilise entièrement CSS3 pour obtenir un carrousel transparent, généralement entrer dans plus de pièges. , puis résolvez-les grâce à vos propres recherches. Lentement et naturellement, vous n'aurez plus ce genre de problème. Le chemin initial est long, continuons à travailler dur !!!! Tout le contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utiliser CSS3 pour obtenir l'effet de lanterne tournante

À propos de CSS utilisant une image d'arrière-plan pour créer un menu de navigation Idées d'implémentation

Comment utiliser CSS3 pour obtenir l'effet de rendre la lumière actuelle et les autres grises lorsque la souris se déplace

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!