Use CSS3 to achieve seamless carousel function

This article introduces you to the seamless carousel effect based on css3 through example code. The code is simple and easy to understand, very good, and has reference value. Friends in need can refer to it

Seamless carousel Schematic diagram

1 . html structure:

<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: Listening for the animation end event

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();
        })
    }
}

Summary: Using CSS3 When implementing a seamless carousel, I was struggling with how to seamlessly switch to the first picture at the beginning. At first, I had a relatively simple idea

I thought about directly judging whether the third picture was reached during the carousel process. 9 pictures, then call removeTransition(); to cancel the transition, and then change index=1 to make it seamlessly switch to the first picture. Just when I was confident that it was done, I was slapped in the face!!! !!

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

So….what is the reason?

Because CSS3 transition is an asynchronous event, I suddenly realized at that time, Only then did I realize my youth and ignorance.

So since it is an asynchronous event, we need to use the listening event to monitor the end of each transition state,

and then determine the current subscript Whether it reaches the last picture,

switches to the first picture without any animation.

This is completely using CSS3 to achieve seamless carousel. I usually step on the pitfalls and then do my own research. Solve it, and slowly and naturally you will no longer have this problem. The front-end road is long, let us continue to work hard!!!!!

The above is the entire content of this article, I hope it will be helpful to everyone's learning Help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Use css3 to achieve the revolving lantern effect

About css using a background image to create a navigation menu Implementation ideas

How to use css3 to achieve the effect of making the current light and others gray when the mouse moves in

The above is the detailed content of Use CSS3 to achieve seamless carousel function. For more information, please follow other related articles on the PHP Chinese website!