The core code is as follows.
Copy codeThe Code is as follows:
<Script src = "/js/jquery. js"> </script>
<Script>
$ (Document). ready (function (){
$ (". Bannerbutton li"). each (
Function (){
$ (This). click (
Function (){
BannerGo ($ (this). attr ("num "));
}
)
}
)
$ (". Img li: last" cmd.html ($ (". img li: first" cmd.html ());
});
Var active = 1; // currently, 1st
Var picNum = 4; // 4 graph Conversions
Var time = 500; // movement speed
Var intTime = 3000; // automatic conversion Interval
Var width = 568; // Image width
Var perDistance = 57; // the distance between each movement.
Var tagObj = 0;
Var marquee;
Var autoMarquee;
Var distance;
Var tmpDistance = 0;
Var listLeft = 0;
Var tagLeft = 0;
Var move = false;
Function bannerGo (tag ){
If (active! = Tag ){
If (! Move ){
ListLeft = parseInt ($ (". banner ul. img" ).css ("left "));
Distance = (tag-active) * width;
TmpDistance = 0;
PerTime = parseInt (time * perDistance/distance );
If (tag> active ){
TagLeft = listLeft-distance;
Marquee = setInterval ("Marquee (1)", perTime)
} Else {
TagLeft = listLeft-distance;
Marquee = setInterval ("Marquee (0)", perTime)
}
Active = Number (tag );
If (active = picNum + 1)
Active = 1;
Move = true;
}
}
}
Function Marquee (t ){
Var x = false;
If (t = 0 ){
ListLeft = listLeft + perDistance;
If (tagLeft-listLeft)> = perDistance ){
$ (". Banner ul. img" ).css ("left", listLeft + "px ");
} Else {
$ (". Banner ul. img" ).css ("left", tagLeft + "px ");
X = true;
}
} Else {
ListLeft = listLeft-perDistance;
If (tagLeft-listLeft) <= perDistance ){
$ (". Banner ul. img" ).css ("left", listLeft + "px ");
} Else {
$ (". Banner ul. img" ).css ("left", tagLeft + "px ");
X = true;
}
}
If (x ){
ClearInterval (marquee );
TmpDistance = 0;
ListLeft = 0;
TagLeft = 0;
Move = false;
$ (". Bannerbutton li" ).css ("background", "url (/images/index/b2.gif) no-repeat ");
$ (". Bannerbutton li [@ num =" + active + "]" background .css ("background", "url (/images/index/b1.gif) no-repeat ");
If (tagObj = picNum + 1 ){
$ (". Banner ul. img" ).css ("left", "0 ");
Active = 1;
}
}
}
Function autoMarquee (){
TagObj = Number (active) + 1;
BannerGo (tagObj );
}
Function autoMarqueeStart (){
If (! Move ){
Marquee = setInterval ("autoMarquee ()", intTime)
} Else {
SetTimeout ("autoMarqueeStart ()", time );
}
}
AutoMarqueeStart ();
</Script>
<Style>
* {Margin: 0; padding: 0; border: 0}
Li {float: left ;}
Ul {list-style-type: none ;}
. Banner {height: 228px; width: 568px; overflow: hidden ;}
. Bannerbutton li {
Width: 23px;
Height: 22px;
Background: url (/images/index/b2.gif) no-repeat;
Cursor: pointer;
Line-height: 22px;
Text-align: center;
Color: # fff;
Font-weight: bold;
}
. Banner. img li {float: left ;}
. Banner. img {
Position: relative; width: 5600px;
}
Body, td, th {
Font-size: 12px;
}
Body {
Margin-left: 0px;
Margin-top: 0px;
Margin-right: 0px;
Margin-bottom: 0px;
}
</Style>
<Div class = "banner">
<Ul class = "bannerbutton" style = "position: absolute; z-index: 2; top: 200px; left: 10px;">
<Li num = 1 style = "background: url (/images/index/b2.gif);"> 1 </li>
<Li num = 2> 2 </li>
<Li num = 3> 3 </li>
<Li num = 4> 4 </li>
</Ul>
<Ul class = "img" style = "left: 0px;">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>