CSS3 Make Seamless Carousel ads

This time to everyone to bring CSS3 to make seamless carousel advertising, CSS3 to make seamless carousel ads notice What, the following is the actual case, together to see.

Schematic diagram of Seamless carousel

1. HTML Schema:

<p class= "Layout" > <p class= "Jd_banner" > <ul class= "clearfix" > <li><a href = "#" ></a></li> <li><a href= "#" ></a></li> <li><a href=" # "></a></li> <li><a href= "#" ></a></li> <li><a HR ef= "#" ></a></li> <li><a href= "#" ></a></li> <li><a href=" # "><a href= "#" ></a></li> <li><a href= "#" &GT;&L T;img src= "images/l1.jpg" ></a></li> </ul> </p></p>

javascript:

/* Carousel Diagram */function banner () {var banner = Document.queryselector ('. Banner ');    /* Get device Width */var offsetwidth = banner.offsetwidth;    /* Picture container */var Imagebox = banner.queryselector (' Ul:first-child ');        /* Add transition animation properties to the picture container */function Addtransition () {imageBox.style.transition = ' all 0.5s ';    ImageBox.style.webkitTransition = ' All 0.5s ';        }/* Clear picture Container Add transition animation Properties */function Removetransition () {imageBox.style.transition = ' none ';    ImageBox.style.webkitTransition = ' None ';        }/* Set X-axis positioning */function Settranslatex (offsetX) {imageBox.style.transform = ' TranslateX (' + OffsetX + ' px) ';    ImageBox.style.webkitTransform = ' TranslateX (' + OffsetX + ' px) ';    }//define current index var index = 1;        Auto-Carousel var timer = setinterval (function () {index++;        Addtransition ();        Settranslatex (-index * offsetwidth);    Synchronize settings CSS//underlying asynchronous Operation}, 2000); Transvar.transitionend (Imagebox, function () {//listens for the end of each animation if (index>= 9) {//When the Carousel is 9th, seamlessly switch to the 1th picture index = 1;            Clear transition removetransition ();        No animated positioning to the first picture Settranslatex (-index * offsetwidth);  }     }); }

JavaScript: Listening for animation end events

Window.transvar = {};   Defines a window's global object//Listener CSS3 Transition Animation End Event Transvar.transitionend = function (obj,callback) {    if (typeof  obj = =) Object ') {        obj.addeventlistener (' Webkittransitionend ', function () {  ///Compatibility            callback && callback ();  The && operator, if the callback function exists, calls the callback () function        })        Obj.addeventlistener (' Transitionend ', function () {            callback && callback ();}        )}    }

Summary: In the use of CSS3 to achieve seamless rotation, the beginning has been tangled how to do seamless switch to the first one, there was a relatively simple idea

Think in the process of the carousel, directly determine whether to the 9th picture, then call Removetransition (), cancel the transition, and then change the index=1, let it seamlessly switch to the 1th, just as I was full of confidence to complete, but the result gave me a slap!!!!!!

var timer = setinterval (function () {        index++;        Addtransition ();        Settranslatex (-index * offsetwidth);        if (index >= 9) {   //When the Carousel is 9th, the Listener animation event is not invoked and the transition state            removetransition () is canceled directly;            index = 1;            Settranslatex (-index * offsetwidth);        }     , 2000);

So .... What is the reason for it?

Because the CSS3 transition is an asynchronous event, it dawned on me that I realized my young ignorance.

So, since it's an asynchronous event, we need to listen to the listening events to monitor the end of each transition state,

And then judging if the current subscript is the last one,

No more animation state to switch to the 1th one.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 makes a striped big background

CSS3 Make semicircular arcs