jquery Carousel (auto + subscript)

Mainly to the new Year's Day more things so on the first sent out there are insufficient places please point out more.

1. HTML

<div class= "Slidebox" id= "Slidebox" >
<div class= "BTN" >
<span class= "left" ><</span>

<span class= "right" >></span>
</div>
<div class= "Slide slide01" >
<a href= "javascript:" class= "pic" ></a>
<span class= "txt" ><a href= "#" > Cool run 11111111111</a></span>
</div>
<div class= "Slide Slide02" >
<a href= "javascript:" class= "pic" ></a>
<span class= "txt" ><a href= "#" > Cool run 2222222222</a></span>
</div>
<div class= "Slide slide03" >
<a href= "javascript:" class= "pic" ></a>
<span class= "txt" ><a href= "#" > Cool run 33333333333</a></span>
</div>
<div class= "Slide Slide04" >
<a href= "javascript:" class= "pic" ></a>
<span class= "txt" ><a href= "#" > Cool run 44444444444</a></span>
</div>
<div class= "Slide slide05" >
<a href= "javascript:" class= "pic" ></a>
<span class= "txt" ><a href= "#" > Cool run 55555555555</a></span>
</div>
<ul class= "Btns" >
<li class= "current" ><a href= "javascript:" >1</a></li>
<li><a href= "javascript:" >2</a></li>
<li><a href= "javascript:" >3</a></li>
<li><a href= "javascript:" >4</a></li>
<li><a href= "javascript:" >5</a></li>
</ul>
</div>

2. CSS

<style type= "Text/css" >
* {margin:0; padding:0;}
A, a:link, a:visited {color: #333;}
img {border:0;}
. slidebox {position:relative; margin:0 auto; margin-top:50px; width:500px; height:200px;}
. Slidebox. Slide,
. slidebox. Slide A.pic,
. Slidebox. Slide a.pic img {width:500px; height:200px;}
. slidebox. Slide {position:absolute; z-index:0;}
. Slidebox. slide01 {z-index:1;}
. slidebox. Slide A.pic,
. slidebox. Slide span.txt {display:block;}
. Slidebox. Slide img {}
. slidebox. Slide Span.txt {position:absolute; bottom:0; left:0; width:500px; height:40px; background: #000; filter:a Lpha (OPACITY:60); Background:rgba (0, 0, 0, 0.6); text-indent:20px; line-height:38px;}
. slidebox. Slide Span.txt a {text-decoration:none; color: #fff; font:16px Arial;}
. slidebox. Slide span.txt a:hover {text-decoration:underline;}
. Slidebox. btns {position:absolute; list-style:none; bottom:11px; right:5px; z-index:99999999;}
. Slidebox btns li {float:left; margin-right:5px; width:18px; height:18px; border:0px solid #ccc; background: #666; t Ext-align:center; font:12px/20px Arial;}
. Slidebox. btns li.current {background: #f33;}
. Slidebox Btns Li a {text-decoration:none; display:block; color: #fff;}
. Slidebox. btn {z-index:999;position:absolute;width:500px;}
. Slidebox. btn span {background-color: #ccc; color: #ffffff;p adding:5px 12px;opacity:0.5;}
. Slidebox. btn span.left {position:absolute;left:0;top:70px;}
. Slidebox. btn span.right {position:absolute;right:0px;top:70px;}
. Slidebox. BTN span:hover{cursor:pointer;opacity:0.8;color: #464646;}
</style>

Jquery

<script type= "Text/javascript" >

$ (function () {

function Slide () {

var aslides = $ ("#slideBox. Slide");
/* Get each IMG */
var abtns = $ ("#slideBox. Btns li");
/* Get each li*/
var timer = null;
Abtns.each (function (index) {
Abtns[index].onmouseover = function () {
Clearinterval (timer); /* Clear Clearinterval */
for (var j = 0; J < Aslides.length; J + +) {
Aslides[j].style.zindex = 0;
Abtns[j].classname = "";
}
/* loop all ZIndex to 0 no CSS */
Abtns[index].classname = "current";
Aslides[index].style.zindex = 1;
/* Add zindex and CSS when mouse is moved */
}
Abtns[index].onmouseout = function () {
Autoslide (index); /* Pass the value subscript */
}
});
function Autoslide (index) {
var index = index| | 0;
/* To determine if there is no index, there is an assignment starting from the assignment, no 0 is the first subscript */
Timer = setinterval (function () {
if (index >= abtns.length) {
index = 0;
}
/* Page load resets when the Carousel index subscript is greater than or equal to the length of Li */
for (var i = 0, j = 0; I < Abtns.length, J < Aslides.length; i++, J + +) {
Abtns[i].classname = "";
Aslides[j].style.zindex = 0;
}
Abtns[index].classname = "current";
Aslides[index].style.zindex = 1;
index++;
}, 2000);
}

Autoslide ();
}
Slide ();
});

There's still a left and right switch because of the time and technical problems did not resolve the upload (resolved in the upload), or have a help to write a bit. Thank you

jquery Carousel (auto + subscript)