<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
#menu{margin:0 34%;}
li{width:30px; height:20px; background:yellow; list-style:none; float:left; margin-left:20px; text-align: center;}
#box{width:400px; height:600px; margin:0 35%;}
.first{background:red; }
.left{width:30px; height:50px; font-size:50px; position:absolute; top:250px;left:32%; background: darkgray; opacity: 0.5; text-align: center;}
.right{width:30px; height:50px; font-size:50px; position:absolute; top:250px;left:60%;background: darkgray; opacity: 0.5; text-align: center;}
</style>
</head>
<body>
<div id="box"><img src="0.jpg"></div>
<span class="left"><</span>
<span class="right">></span>
<ul id="menu">
<li class="first">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var arr=["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg"];
$(function () {
function lunbo() {
if($(".first").index()<arr.length-1){
$(".first").removeClass("first").next().addClass("first");
$("img").attr("src",arr[$(".first").index()]);
}else{
$("li:last").removeClass("first");
$("li:first").addClass("first");
$("img").attr("src",arr[$("li:first").index()]);
}
}
var t=setInterval(lunbo,1000);
$("li").bind({mouseover:function () {
clearInterval(t);
$(".first").removeClass("first");
$(this).addClass("first");
$("img").attr("src",arr[$(this).index()]);
},mouseout:function () {
t=setInterval(lunbo,1000);
}});
$(".right").bind({mouseover:function () {
clearInterval(t);
},mouseout:function () {
t=setInterval(lunbo,1000);
},click:function () {
lunbo();
}});
$(".left").bind({mouseover:function () {
clearInterval(t);
},mouseout:function () {
t=setInterval(lunbo,1000);
},click:function () {
if($(".first").index()>0){
$(".first").removeClass("first").prev().addClass("first");
$("img").attr("src",arr[$(".first").index()]);
}else{
$("li:last").addClass("first");
$("li:first").removeClass("first");
$("img").attr("src",arr[$("li:last").index()]);
}
}});
});
</script>
</body>
</html>
