A navigation scroll effect implemented by jquery

Now copy the code here, and then simplify the modifications one by one:
The script code is as follows:

The Code is as follows:
Var all = 0;
Var no = 0;
Var s_width = 0;
$ (Document). ready (function (){
All = $ ('. slide'). length;
S_width = $ ('. slide'). eq (0). width ();
$ ("# Slides" ).css ('width', all * s_width );
Var contiar = $ ('. control_links ');
For (var I = 0; I <all; I ++ ){
Contiar. append ("<li> </li> ");
}
$ ('. Control_links li'). bind ('click mouseenter', function (){
Var index = $ (this). index ();
No = index;
Var no _ = no % all;
$ ("# Slides"). animate ({left :(-1 * no _ * s_width) + 'px '}, 200 );
Watermark (this).css ('background-color', '# fff ');
((This).siblings().css ('background-color', '#333 ');
});
SetInterval (function (){
Var no _ = no % all;
$ ("# Slides"). animate ({left :(-1 * no _ * s_width) + 'px '}, 1000 );
Var curr = $ ('. control_links li'). eq (no _);
Curr.css ('background-color', '# fff ')
Curr.siblings().css ('background-color', '#333 ');
No ++;
},5000 );
});

The css code is as follows:

The Code is as follows:
Img {
Border: none;
}
# Daohangpic {
Width: 1000px;
Margin: 0 auto;
Padding: 20px;
Overflow: hidden;
}
# Daohangpic img {
Height: pixel PX;
Width: 980px;
}

# Contiar {
Position: relative;
Width: 980px;
Height: pixel PX;
Overflow: hidden;
Margin: 0 auto;
}
# Slides {
Position: absolute;
Border: none;
}
. Slide {
Float: left;
Width: 980px;
Height: pixel PX;
Overflow: hidden;
Border: none;
}
. Control_links {
Position: absolute;
Bottom: 10px;
Right: 10px;
Z-index: 200;
}
. Control_links,. control_links li {
List-style: none;
}
. Control_links li {
Float: left;
Width: 15px;
Height: 15px;
Margin-right: 5px;
Text-align: center;
Background: #333;
Border: 1px solid #666;
Cursor: pointer;
Opacity: 0.5;
}
. Caption {
Position: absolute;
Height: 50px;
Width: 100%;
Background-color: #000;
Bottom: 0px;
Padding-left: 20px;
Padding-top: 10px;
Overflow: hidden;
Z-index: 100;
Background: url(hdpng.png) no-repeat scroll 0-1px;
}
. Caption h2 {
Color: # FFF;
Font-size: 17px;
Font-weight: bold;
Line-height: 25px;
}
. Caption p {
Display: block;
Color: #767676;
Font-size: 12px;
Line-height: 15px;
}

The region to be rolled is defined as follows:

The Code is as follows:
<Div id = "daohangpic">
<Div id = "contiar">
<Div id = "slides">
<Div class = "slide"> <a href = "http://2.zutvideo.duapp.com/Detail.action? V = movie "title =" revealed the gramme Award List, the awards ceremony was held at the event: "target =" _ blank "> </a>
<Div class = "caption">
<H2> revealed the Winner list of the gramme award <P> the gramme Award List was announced, and the awards ceremony was held by many stars. </p>
</Div>
</Div>
<Div class = "slide"> <a href = "http://2.zutvideo.duapp.com/Detail.action? V = movie "title =" popular stars gathered at home and abroad, laruence Lin Zhiling performs a horse Dance "target =" _ blank "> </a>
<Div class = "caption">
<H2> revealed the Winner list of the gramme award <P> the gramme Award List was announced, and the awards ceremony was held by many stars. </p>
</Div>
</Div>
<Div class = "slide"> <a href = "http://2.zutvideo.duapp.com/Detail.action? V = Taobao "title =" Ling huchong, Dong unbeaten, Ren Yingying, 3-member love and tear-up "target =" _ blank "> </a>
<Div class = "caption">
<H2> revealed the Winner list of the gramme award <P> the gramme Award List was announced, and the awards ceremony was held by many stars. </p>
Lower </div>
</Div>
<Div class = "slide"> <a href = "http://2.zutvideo.duapp.com/Detail.action? V = HYPERLINK "title =" Chen Jianfeng fell in love with the leftover female Chen zihan. How can this end? "Target =" _ blank "> </a>
<Div class = "caption">
<H2> revealed the Winner list of the gramme award <P> the gramme Award List was announced, and the awards ceremony was held by many stars. </p>
? </Div>
</Div>
<Div class = "slide"> <a href = "http://2.zutvideo.duapp.com/Detail.action? V = movie "title =" discover the beauty of life, bathe in the light of faith "target =" _ blank "> </a>
<Div class = "caption">
<H2> revealed the Winner list of the gramme award <P> the gramme Award List was announced, and the awards ceremony was held by many stars. </p>
</Div>
</Div>
</Div>
<Ul class = "control_links">
</Ul>
</Div>
<Div id = "back_img"> </div>
</Div>