CSS3 Make Seamless Carousel ads

Source: Internet
Author: User
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>


/* 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.