jquery Enables simple carousel

Source: Internet
Author: User

First, the simple HTML code

<!DOCTYPE HTML><HTML>    <Head>        <Linkrel= "stylesheet"type= "Text/css"href= "./css/init2.css">        <Scripttype= "Text/javascript"src= "./js/jquery-1.11.3.min.js"></Script>        <Scripttype= "Text/javascript"src= "./js/test2.js"></Script>    </Head>    <Body>        <DivID= "Layout">            <Headerclass= "Clearfix">                <DivID= "banner">                    <ulID= "Banner_img">                        <Liclass= "Active"><imgsrc= "./img/1.jpg"></Li>                        <Li><imgsrc= "./img/2.jpg"></Li>                        <Li><imgsrc= "./img/3.jpg"></Li>                    </ul>                </Div>            </Header>        </Div>    </Body></HTML>

In this HTML directory there are three sibling folders, IMG in the image, CSS and JS to store the CSS files and JS files, the use of jquery here, remember the introduction of the order, jquery must be placed in front of other JS.

The HTML code is simple and does not explain too much.

Init2.css

*{margin:0px;padding:0px;}#layout{width:960px;margin:0 Auto;}#banner{position:relative;Overflow:Hidden;width:Auto;Height:200px;Border-radius:10px;Border:2px solid Black;}#banner_img Li{float: Left;List-style-type:None;position:Absolute; Left:-100%;}#index{position:Absolute; Right:8px;Bottom:8px;}#index Li{float: Left;width:16px;Height:16px;text-align:Center;Line-height:16px;Border-radius:5px;Border:1px solid #FF7300;background: White;List-style:None;Margin-left:8px;cursor:Pointer;}. Clearfix:after{content: "" ;Height:0px;Display:Block;Clear:both;}. on{background:#FF7300;}

CSS basically corresponds to the class in the previous HTML, Claerfix to clear the float, on is the index of the carousel image that is currently playing, the main idea is to set the picture to the absolute layout after all moved to the side of the parent element, and then through the jquery animation to change the position of the picture , thus achieving the effect of carousel.

Take a look at the processing of the mouse hover over the picture area (refer to someone else's):

 $ ("#banner"). Hover (function   () {        Clearinterval (Adtimer); },  function   () {Adtimer  =setinter Val (function   () { // alert (index);                  Showimgs (index);                Index  ++;  if  (Index==len) {Index  =                0 2000 ' MouseLeave '); 

Hover () is a way to replace MouseEnter and MouseLeave, and it is easier to hear. Trigger () to trigger a state of the current object, which is to trigger a MouseLeave state to initialize the timer, because the setting here is to destroy the timer when the mouse is moved to $ ("#banner"), lock the current image, and then add the timer again by moving the mouse away.

Then look at the implementation of the jquery animation:

function Showimgs (Index) {    $ (". Active"). Animate ({"Left": " -100%"},1000);    $ (". Active"). Removeclass (' active ');    $ ("#banner_img li"). EQ (index). CSS (' left ', ' 100% ');    $ ("#banner_img li"). EQ (index). Animate ({"Left": "0%"},1000);    $ ("#index li"). Removeclass (' on '). EQ (index). addclass (' on ');    $ ("#banner_img li"). EQ (index). addclass (' active ');}

Here the main idea is to have class=active pictures, that is, the picture is being displayed to the left, and remove the active class, at the same time to pass in the corresponding image of the index on the parent element to the right, and then also left to move, so that the result of a right to the left to move the illusion. Then add the image that is moved from the right to the active class.

We also need a way to add a picture index:

function Addindex (n) {    var ul = $ ("<ul id=\" index\ "></ul>");      for (var i=1;i<=n;i++)    {        var li = $ ("<li></li>");        Li.append (function(num) {                return  num            } (i));        Ul.append (li);    }    Ul.children (). First (). addclass (' on ');    $ ("#banner"). Append (ul);}

Basically, it is important to note that the width of the image should be the same as the parent element, or there will be no continuous convergence or partial overflow problem.

All JS:

init ();functionInit () {$ (function(){        varindex = 1 ; varAdtime; varLen = $ ("#banner_img Li"). length;        Addindex (len); $(". Active"). CSS (' left ', ' 0% '); varBannerli = $ ("#index Li"); //Handle Index$ ("#index li"). MouseOver (function() {index= $ ("#index li"). Index ( This) ;            Jumpimgs (index); Index++ ; if(index==Len) {Index= 0 ;        }        }); //Toggleinterval$ ("#banner"). Hover (function() {clearinterval (Adtimer); },function() {Adtimer=setinterval (function(){                //alert (index);Showimgs (index); Index++; if(index==Len) {Index=0; }            },2000)}). Trigger (' MouseLeave '); });} //Auto Add indexfunctionAddindex (n) {varUL = $ ("<ul id=\" index\ "></ul>") ;  for(vari=1;i<=n;i++)    {        varLi = $ ("<li></li>") ; Li.append (function(num) {returnnum}        (i));    Ul.append (LI); } ul.children (). First (). addclass (' On ') ; $("#banner"). Append (ul);}functionJumpimgs (Index) {$ (". Active"). CSS (' left ', '-100% ')); $(". Active"). Removeclass (' active ')  ; $("#banner_img li"). EQ (index). CSS (' left ', ' 0% '); $("#banner_img li"). EQ (index). addclass (' active ') ;}functionShowimgs (Index) {$ (". Active"). Animate ({"Left": "100%"},1000); $(". Active"). Removeclass (' active ') ; $("#banner_img li"). EQ (index). CSS (' left ', ' 100% '); $("#banner_img li"). EQ (index). Animate ({"Left": "0%"},1000); $("#index Li"). Removeclass (' on '). EQ (index). addclass (' on ')) ; $("#banner_img li"). EQ (index). addclass (' active ') ;}
View Code

jquery Enables simple carousel

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.