Using CSS3 to achieve seamless carousel functionality

This article through the example code to introduce to you based on the CSS3 implementation of the seamless carousel effect, code simple and easy to understand, very good, with reference value, need to refer to a friend

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.

This is the complete use of CSS3 to achieve seamless rotation, usually more step on the pit, and then through their own research to solve, slowly naturally will not make this problem, the front end of the road, let us continue to refuel!!!!!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!