<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scs</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
html {font-size:12px;font-family:Arial;}
.slide_box ul {position:relative;width:3200px;height:300px;padding:0;margin:0;}
.slide_box li {float:left;width:400px;height:300px;list-style:none;}
.slide_box img {border:0;width:400px;height:300px;}
.slide_box {position:relative;width:400px;height:300px;overflow:hidden;}
.num_list {position:absolute;left:215px;top:270px;width:180px;height:22px;}
.num_list li {float:left;width:20px;height:22px;margin-right:2px;border:none;list-style:none;text-align:center;color:#000;}
.num_list a {display:block;width:20px;height:22px;line-height:20px;padding-top:2px;background:url(box01.gif) no-repeat 0 3px;color:#000;text-decoration:none;}
.num_list a:hover {background:url(box02.gif) no-repeat 0 0;color:#fff;}
.num_list .on {background:url(box02.gif) no-repeat 0 0;color:#fff;}
</style>
<script type="text/javascript">
function slider(){
this.move = 668;
this.list = $('.slide_box .pic li');
this.len = this.list.length;
this.num = $('.num_list li');
this.pic = $('.slide_box .pic');
this.current = 0;
this.time;
}
slider.prototype = {
init:function(){
var that = this;
this.time = setInterval(function(){that.autoplay();},3000);
this.num.each(function(i){
$(this).find('a').click(function(e){
clearInterval(that.time);
that.pic.animate({"left":-400*i+"px"},500);
if(that.current != i){
$(that.num[that.current]).find('a').removeClass('on');
$(that.num[i]).find('a').addClass('on');
}
that.current = i;
e.preventDefault();
that.time = setInterval(function(){that.autoplay();},3000);
});
});
},
autoplay:function(){
var that = this;
if(that.current < this.len-1){
$(that.num[that.current]).find('a').removeClass('on');
$(that.num[that.current+1]).find('a').addClass('on');
that.current ++ ;
that.pic.animate({"left":-400*that.current+"px"},500);
}else{
$(that.num[that.current]).find('a').removeClass('on');
that.current = 0;
$(that.num[that.current]).find('a').addClass('on');
that.pic.animate({"left":-400*that.current+"px"},500);
}
}
}
$(function(){
new slider().init();
})
</script>
</head><body>
<div class="slide_box">
<ul class="pic">
<li><a href="#"><img src="001 (1).jpg" /></a></li>
<li><a href="#"><img src="001 (2).jpg" /></a></li>
<li><a href="#"><img src="001 (3).jpg" /></a></li>
<li><a href="#"><img src="001 (4).jpg" /></a></li>
<li><a href="#"><img src="001 (5).jpg" /></a></li>
<li><a href="#"><img src="001 (6).jpg" /></a></li>
<li><a href="#"><img src="001 (7).jpg" /></a></li>
<li><a href="#"><img src="001 (8).jpg" /></a></li>
</ul>
<div class="num_list">
<li><a href="#" class="on">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</div>
</div>
<div id="22"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scs</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
html {font-size:12px;font-family:Arial;}
.slide_box ul {position:relative;width:3200px;height:300px;padding:0;margin:0;}
.slide_box li {float:left;width:400px;height:300px;list-style:none;}
.slide_box img {border:0;width:400px;height:300px;}
.slide_box {position:relative;width:400px;height:300px;overflow:hidden;}
.num_list {position:absolute;left:215px;top:270px;width:180px;height:22px;}
.num_list li {float:left;width:20px;height:22px;margin-right:2px;border:none;list-style:none;text-align:center;color:#000;}
.num_list a {display:block;width:20px;height:22px;line-height:20px;padding-top:2px;background:url(box01.gif) no-repeat 0 3px;color:#000;text-decoration:none;}
.num_list a:hover {background:url(box02.gif) no-repeat 0 0;color:#fff;}
.num_list .on {background:url(box02.gif) no-repeat 0 0;color:#fff;}
</style>
<script type="text/javascript">
function slider(){
this.move = 400;
this.list = $('.slide_box .pic li');
this.len = this.list.length;
this.num = $('.num_list li');
this.pic = $('.slide_box .pic');
this.current = 0;
this.time;
}
slider.prototype = {
init:function(){
var that = this;
this.time = setInterval(function(){that.autoplay();},3000);
this.num.each(function(i){
$(this).find('a').click(function(e){
clearInterval(that.time);
that.pic.animate({"left":-that.move*i+"px"},500);
if(that.current != i){
$(that.num[that.current]).find('a').removeClass('on');
$(that.num[i]).find('a').addClass('on');
}
that.current = i;
e.preventDefault();
that.time = setInterval(function(){that.autoplay();},3000);
});
});
},
autoplay:function(){
var that = this;
if(that.current < this.len-1){
$(that.num[that.current]).find('a').removeClass('on');
$(that.num[that.current+1]).find('a').addClass('on');
that.current ++ ;
that.pic.animate({"left":-that.move*that.current+"px"},500);
}else{
$(that.num[that.current]).find('a').removeClass('on');
that.current = 0;
$(that.num[that.current]).find('a').addClass('on');
that.pic.animate({"left":-that.move*that.current+"px"},500);
}
}
}
$(function(){
new slider().init();
})
</script>
</head><body>
<div class="slide_box">
<ul class="pic">
<li><a href="#"><img src="001 (1).jpg" /></a></li>
<li><a href="#"><img src="001 (2).jpg" /></a></li>
<li><a href="#"><img src="001 (3).jpg" /></a></li>
<li><a href="#"><img src="001 (4).jpg" /></a></li>
<li><a href="#"><img src="001 (5).jpg" /></a></li>
<li><a href="#"><img src="001 (6).jpg" /></a></li>
<li><a href="#"><img src="001 (7).jpg" /></a></li>
<li><a href="#"><img src="001 (8).jpg" /></a></li>
</ul>
<div class="num_list">
<li><a href="#" class="on">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</div>
</div>
<div id="22"></div>
</body>
</html>