<style>
*{margin:0;padding:0;}
ul{ list-style:none;}
ul li{ float:left;}
body{ width:600px;margin:0 auto;}
.page{ width:600px; overflow:hidden;}
.box{ width:400px; overflow:hidden; margin:0 auto;}
.box img{width:400px; height:400px;}
.Back,.Next{ float:left; width:100px; text-align:center; float:left;height:30px; line-height:30px; cursor:pointer;}
.pagenum{ float:left; width:400px; text-align:center;height:30px; line-height:30px; float:left; margin-top:4px;}
.pagenum li{ width:20px; height:20px; line-height:20px; border:1px solid #363; margin-right:10px; cursor:pointer; color:#363; margin-top:1px;}
.pagenum li:hover{ color:#930;border:1px solid #930;}
.pagenum .li_hover{ color:#930;border:1px solid #930; font-size:14px; padding:1px; margin-right:11px;margin-top:0px;}
</style>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(function(){
var b=1;
var Num=$(“.pagenum li”).length;
var timer = null;
var offset = 4000;
if(!timer){
window.setTimeout(showAuto,offset);
};
function showAuto(){
b++;
if(b > Num || b < 0){
b=1;
}
show_img(b);
clearTimeout(timer);
timer = window.setTimeout(showAuto,offset);
};
function show_img(k){
$(“.box li”).hide();
$(“.box li”).eq(k-1).show();
$(“.pagenum li”).eq(k-1).addClass(“li_hover”);
$(“.pagenum li”).eq(k-1).siblings(“li”).removeClass(“li_hover”);
b=parseInt($(“.pagenum li”).eq(k-1).html());
};
$(“.pagenum li”).click(function(){
var _this=$(“.pagenum li”).index(this);
$(this).addClass(“li_hover”);
$(this).siblings(“li”).removeClass(“li_hover”);
$(“.box li”).hide();
$(“.box li”).eq(_this).show();
b=parseInt($(“.pagenum li”).eq(_this).html());
});
$(“.Back,.Next”).hover(function(){
if(timer)
{
clearTimeout(timer);
show_img(b);
}
},function(){
clearTimeout(timer);
timer = window.setTimeout(showAuto
,offset);
return false;
});
$(“.Back”).click(function(){
b=b-1;
if(b<0)
{
b=Num-1;
}
show_img(b);
});
$(“.Next”).click(function(){
b=b+1;
if(b>Num)
{
b=1;
}
show_img(b);
});
});
</script>
<body>
<div>
<ul>
<li><img src=”images/img_01.jpg” /></li>
<li style=”display:none”><img src=”images/img_02.jpg” /></li>
<li style=”display:none”><img src=”images/img_03.jpg” /></li>
<li style=”display:none”><img src=”images/img_04.jpg” /></li>
<li style=”display:none”><img src=”images/img_05.jpg” /></li>
</ul>
</div>
<div>
<span>Back</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span>Next</span>
</div>
</body>
demo查看