Self-written carousel diagram plug-in, the function is constantly increasing, can download

One: Structure

<!--carousel begin--><div class= "Carousel-wrap" >    <div class= "Carousel-main-wrap" >        < UL class= "Carousel-scroll-wrap" >            <li></li>            <li>< IMG src= "images/2.jpg" ></li>            <li></li>            <li>< IMG src= "images/4.jpg" ></li>            <li></li>            <li>< IMG src= "images/6.jpg" ></li>            <li></li>            <li>< IMG src= "images/8.jpg" ></li>        </ul>        <span class= "Carousel-left" > Left </span>        <span class= "Carousel-right" > Right </span>    </div></div><!--Carousel End--

　　

Note that 1 must be three sheets, 2 outermost carousel-wrap must have a wide height

Two: CSS

/* CSS Reset start*/@charset "UTF-8"; *{padding:0;    margin:0;    List-style:none; border:0;}    body{width:100%;    font-family: ' SimSun ', ' Microsoft Yahei ', Arial;    font-size:14px; Color: #fff;}    a,a:visited{color: #fff; Text-decoration:none;} a:hover{Text-decoration:none;} img{Display:block;}    /* CSS reset end *//* carousel start */.carousel-wrap{width:800px;    height:504px;    margin:0 Auto;    }.carousel-main-wrap{Overflow:hidden; Position:relative;}. carousel-scroll-wrap{position:relative;}.    Carousel-scroll-wrap li{Overflow:hidden;    Position:absolute;    top:0; left:10000px;}.    Carousel-scroll-wrap Li img{width:800px;    height:504px; Display:block;}.    carousel-left{width:50px;    height:100px;    Margin-top: -50px;    line-height:100px;    Text-align:center;    Color: #fff;    Background-color:teal;    Display:block;    Position:absolute;    left:0;    top:50%; Cursor:pointer;}. Carousel-right{WIdth:50px;    height:100px;    Margin-top: -50px;    line-height:100px;    Text-align:center;    Color: #fff;    Background-color:teal;    Display:block;    Position:absolute;    right:0;    top:50%; Cursor:pointer;}.    carousel-control{height:10px; Overflow:hidden;}.    Carousel-control span{width:20%;    height:10px;    Display:inline-block;    Background-color:orange; Cursor:pointer;}. Carousel-control span.cur{background-color: #f60;} /* Carousel End */

　　

Three: JS

Based on JQ,

<script type= "Text/javascript" src= "js/jquery-1.7.2.min.js" ></script><script type= "Text/javascript "Src=" Js/carousel.js "></script>carousel.js code is as follows: function Carouselplay (config) {//Set variable default data var Carouselspeed = Config.carouselspeed | |    800; var Carouselfuncton = Config.carouselfuncton | |    ' Swing '; var imgwidth = Config.imgwidth | |    400; var imgheight = Config.imgheight | | 304;//the following constants, generally do not have to change var Carouselli = (′.carousel−scroll−wrapli′); varcontrolspan= (′.carousel−scroll−wrapli′);    Varcontrolspan= ('. Carousel-control span ');    var carouselcount = Carouselli.index () +1;    var curleft = ImgWidth;    var nextleft = imgwidth*2;    var prevleft = 0;    var outleft = 10000;    var curindex = 0;    var nextindex = 1; var previndex = carouselcount-1;//Initialize var jobinite = function () {(′.carousel−main−wrap′). CSS (Width:imgwidth,heig ht:imgheight);(′.carousel−main−wrap′). CSS (width:imgwidth,height:imgheight);('. Carousel-scroll-wrap '). CSS ({Widt H:imgWidth*3, Height:imgheight, left:-imgwidth, top:0});        Carouselli.eq (Curindex). CSS (' left ', curleft);        Carouselli.eq (Nextindex). CSS (' left ', nextleft);    Carouselli.eq (Previndex). CSS (' left ', prevleft);        } jobinite ();//Scroll Right one sheet of logical function Rightzero (a) {a++;        if (a = = Carouselcount) {a = 0;        } return a}//the logical function Leftzero (a) {a--, which scrolls left one sheet        if (A = =-1) {a = carouselCount-1;    } return a}//small dots control the logic of the picture switching, small point control function has not been finished, but does not affect other functions!        function Controlzero (a) {curindex = A;        if (a = = = (carouselCount-1)) {nextindex = 0;        } else{nextindex = a+1;        } if (a = = 0) {previndex = Carouselcount;        } else{Previndex = A-1; }}//scrolling function focusanimate (carouselli,index,left) {carouselli.eq (index). Stop (True,true). Animate ( {' Left ': lefT}, Carouselspeed, Carouselfuncton);    }//Disposition window other than the picture function imgout (Carouselli, index) {carouselli.eq (index). CSS (' left ', outleft);    }//control button function, the function has not finished writing, but does not affect other functions!    function Controlplay (curindex) {Controlspan.eq (Curindex). addclass (' cur '). Siblings (). Removeclass (' cur ');        }//Right Toggle Motion function Rightplay () {//scroll pre-initialize picture index jobinite ();        Toggle Right Focusanimate (Carouselli, Curindex, prevleft);        Focusanimate (Carouselli, Nextindex, curleft);        Imgout (Carouselli, Previndex);        Reset Index Curindex = Rightzero (Curindex);        Nextindex = Rightzero (Nextindex);        Previndex = Rightzero (Previndex);        Control small dots Follow, function is not finished, but does not affect other functions!    Controlplay (Curindex);        }//Left Toggle Motion function Leftplay () {//scroll pre-initialize picture index jobinite ();        Left Focusanimate (Carouselli, Curindex, nextleft);        Focusanimate (Carouselli, Previndex, curleft);         Imgout (Carouselli, Nextindex);        Reset IndexCurindex = Leftzero (Curindex);        Nextindex = Leftzero (Nextindex);        Previndex = Leftzero (Previndex);        Control small dots Follow, function is not finished, but does not affect other functions!    Controlplay (Curindex);    }//limit user Frequent click var dateprev = 0;    var clickflag = true;        function Clickcheck (minsecond) {var nowdate = new Date ();        var datecur = Nowdate.gettime ();        var dateinterval = Datecur-dateprev;        Dateprev = Datecur;        if (dateinterval<minsecond) {Clickflag = false;        } else{Clickflag = true;    } return Clickflag; }//control switch (′.carousel−right′). Click (Function (Event) if (Clickcheck) rightplay (););(′.carousel−right′). Click (            function (Event) if (Clickcheck) rightplay (););('. Carousel-left '). Click (Function (event) {if (Clickcheck (500)) {        Leftplay ();    }});//small dot control switch, function has not been finished, but does not affect other functions!    Controlspan.mouseover (Event) {//calculates the new current position index Curindex = $ (this). index ();    Reset index Controlzero (curindex);        Initialize picture position jobinite ();    Small dot position following controlplay (Curindex); });} Four: Call <script type= "Text/javascript" >$ in the page (function () {//compounding var config = {' carouselspeed ': +, ' carouselfuncto N ': ' Swing ', ' imgwidth ': +, ' imgheight ': Execution of 504}//carousel graph var main = carouselplay;main (config);}) More calls can refer to demo</script>

　　

Four: Test address

Http://game.feiliu.com/zk/new/plugin/default.html

Five: Demo source download

Http://files.cnblogs.com/files/zk995/demo.rar

Six: Follow-up slowly add to complete a variety of functions, but also to update the complete

Self-written carousel diagram plug-in, the function is constantly increasing, can download