Using JQuery's Fade function (Fadein and fadeout)--to implement the carousel

First of all, I find in the online example is all used by the UL implementation, in fact, it is not necessary, as long as it is able to include the IMG tag HTML tag can do the carousel effect. Use jquery's Fade function (Fadein and fadeout). Needless to say, the side of the code to explain. Finally attach the demo effect address.

<!--overall container--
<div class= "Imgbox" >
<!--picture List, except for the first display, the rest is hidden--
<ul>
<li style= "Display:block" title= "Qing ling girl Like a Dream fairy" ><a href= "#" >
</a></li>
<li title= "Beauty Beach sexy perspective outfit Temptation" ><a href= "#" >
</a></li>
<li title= "Xia Xiaowi: Hundred change little witch change body sexy digital baby" ><a href= "#" >
</a></li>
<li title= "Xia Xiaowi incarnation" Kill the Wolf "Pink Demon Jiphun Tender" ><a href= "#" >
</a></li>
</ul>
<div class= "TITLE_BG common" ><!--picture title background--
</div>
<!--pictures show title---
<div class= "title common" ></div>
<!--picture number--
<div class= "Pager common" >
<ul>
<li>4</li>
<li>3</li>
<li>2</li>
<li style= "background: #FF70Ad;" >1</li>
</ul>
</div>
</div>

Css

Img{border-style:none;}
. imgbox{width:530px;margin:100px;height:350px;}
. Imgbox img{width:530px;height:350px;}
. Imgbox ul{list-style-type:none;margin:0px;padding:0px;}
. Imgbox ul Li{display:none;}
. Title_bg{z-index:1;background-color: #000; Filter:alpha (opacity=30);-moz-opacity:0.3;opacity:0.3;}
. Title{z-index:2;color: #FFF; text-indent:10px;font-size:14px;line-height:40px;}
. Pager{z-index:3;}
. common{position:relative;height:40px;margin-top:-43px;}
. Pager ul{margin-top:5px;}
. Pager ul Li{float:right;color: #FFF; font-size:15px;display:block;border:2px solid #e5eaff; width:25px;height:25px; Margin-right:4px;margin-top:5px;text-align:center;line-height:25px;background-color: #6f4f67; cursor:pointer;}

Js

$ (document). Ready (function () {(New Centerimgplay ()).         Start ();         });             function Centerimgplay () {this.list = $ (". Imgbox"). Children (": First"). Children ();             This.indexs = [];             This.length = This.list.length;             Picture Display time This.timer = 3000; This.showtitle = $ (". Title");

var index = 0, self = this, pre = 0, Handid, Isplay = False, Ispagerclick = false;

            this. Start = function () {                This. Init ();                /Timers for timed carousel pictures                  Handid = SetInterval (self. Play, This.timer);            };            //Initialization              this. Init = function () {                var o = $ (". Pager ul Li"), _i;

                for (var i = o.length-1, n = 0; I >= 0; I--, n++) {                     This.indexs[n] = O.eq (i). Click (Self. Pagerclick);                }             };             this. Play = function () {                Isplay = true;                 index++;                 if (index = = Self.length) {                     index = 0;                }                 //Fade out, perform the next fade in callback function                  Self.list.eq (PRE) FadeOut ("Linear" , function () {                     var info = self.list.eq (index). FadeIn ("Linear", function () {     & nbsp;                  Isplay = false;                          if (ispagerclick) {Handid = SetInterval (self. Play, Self.timer); Ispagerclick = false; }                    }). attr ("title");                     //Display title                      Self.showTitle.text (info);                     //Picture number background Change                      self.indexs[index].css ("Background-color", "#FF70Ad");                      SELF.INDEXS[PRE].CSS ("Background-color", "#6f4f67");

Pre = index;             });             }; Picture number Click this.                 Pagerclick = function () {if (isplay) {return;} Ispagerclick = true;

Clearinterval (Handid);

var Opager = $ (this), I = parseint (Opager.text ())-1;

if (i! = Pre) {index = i-1; Self.                 Play ();         }             }; };

Using JQuery's Fade function (Fadein and fadeout)--to implement the carousel