Seamless carousel realized using CSS3

How to use CSS3 to achieve seamless carousel
1 . html structure:

<p class="layout">
    <p class="jd_banner">
        <ul class="clearfix">
            <li><a href="#"><img  src="images/l1.jpg" alt="How to use CSS3 to achieve seamless carousel" ></a></li>
            <li><a href="#"><img  src="images/l2.jpg" alt="How to use CSS3 to achieve seamless carousel" ></a></li>
            <li><a href="#"><img  src="images/l3.jpg" alt="How to use CSS3 to achieve seamless carousel" ></a></li>
            <li><a href="#"><img  src="images/l4.jpg" alt="How to use CSS3 to achieve seamless carousel" ></a></li>
            <li><a href="#"><img  src="images/l5.jpg" alt="How to use CSS3 to achieve seamless carousel" ></a></li>
            <li><a href="#"><img  src="images/l6.jpg" alt="How to use CSS3 to achieve seamless carousel" ></a></li>
            <li><a href="#"><img  src="images/l7.jpg" alt="How to use CSS3 to achieve seamless carousel" ></a></li>
            <li><a href="#"><img  src="images/l8.jpg" alt="How to use CSS3 to achieve seamless carousel" ></a></li>
            <li><a href="#"><img  src="images/l1.jpg" alt="How to use CSS3 to achieve seamless carousel" ></a></li>
        </ul>
    </p></p>

Copy after login

JavaScript:

/*轮播图*/function banner() {

    var banner = document.querySelector(&#39;.banner&#39;);    /*获取设备宽度*/
    var offsetWidth = banner.offsetWidth;    /*图片容器*/
    var imageBox = banner.querySelector(&#39;ul:first-child&#39;);    /*给图片容器添加过渡动画属性*/
    function addTransition() {
        imageBox.style.transition = &#39;all 0.5s&#39;;
        imageBox.style.webkitTransition = &#39;all 0.5s&#39;;
    }    /*清除图片容器添加过渡动画属性*/
    function removeTransition() {
        imageBox.style.transition = &#39;none&#39;;
        imageBox.style.webkitTransition = &#39;none&#39;;
    }    /*设置X轴定位*/
    function setTranslateX(offsetX) {
        imageBox.style.transform = &#39;translateX(&#39; + offsetX + &#39;px)&#39;;
        imageBox.style.webkitTransform = &#39;translateX(&#39; + offsetX + &#39;px)&#39;;
    }    // 定义当前索引
    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);
        } 
    });
  }

Copy after login

JavaScript: Monitor animation end event

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

Copy after login

Summary: When using CSS3 to achieve seamless carousel, I have been struggling with how to achieve seamless carousel at the beginning. Seamfully switch to the first picture. I had a relatively simple idea at first. I thought that during the carousel process, I would directly determine whether the 9th picture has been reached, and then call removeTransition(); to cancel the transition, and then change the index. =1, let it switch seamlessly 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);

Copy after login

So... what is the reason? What?

Because the transition of CSS3 is an asynchronous event, it suddenly dawned on me at that time that I realized my youth and ignorance.

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

and then determine whether the current subscript has reached the last picture,

and then switch to the first picture without animation state.

This is the complete use of CSS3 to achieve seamless carousel. I often step on pitfalls, and then solve them through my own research. Slowly and naturally, I will not have this kind of problem. The front-end road is long, let us continue to work hard. !!!!

The road ahead is long, let’s keep working hard!!!!!

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