<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>pic_jq</title>
<style>
*{ padding:0; margin:0; list-style:none; }
.pic_js{ width:500px; margin:0 auto; overflow:hidden; border:1px solid #0066CC; position:relative; }
.pic{ width:2000px; z-index:1; }
.pic img{ display:block; width:500px; height:376px; cursor:pointer; }
.pic li{ width:500px; height:376px; float:left; }
.pic_nav{ position:absolute; bottom:3px; right:0px; z-index:100; }
.pic_nav li{ float:left; cursor:pointer; width:40px; height:40px; line-height:40px; border:1px solid #069; margin-right:5px; text-align:center; background:#ff0; }
.pic_nav li img{ width:100%; height:100%; }
.pic_nav .current{ background:#03C; color:#FFF; border:1px solid #F90;}
</style>
<script type="text/javascript" src="http://lib.sinaapp.com/jquery/1.10.2/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="pic" class="pic_js">
<ul id="big" class="pic">
<li><img src="http://dummyimage.com/500x376/ccc&text=1"/></li>
<li><img src="http://dummyimage.com/500x376/eee&text=2"/></li>
<li><img src="http://dummyimage.com/500x376/999&text=3"/></li>
<li><img src="http://dummyimage.com/500x376/666&text=4"/></li>
</ul>
<ul id="icon" class="pic_nav">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var picNum = 0;
var picWidth = 500;//图片的宽度
var picSpeed = 1000;//图片切换速度
var autoSpeed = 4000;//自动播放时间 3000毫秒(3秒)
var big = $('#big');
var li = $('#big li');
var len = li.length;
var icon = $('#icon li');
var now = 0;
var on = 'current';
var timer = null;
function play(){
now ++;
if(now >= len){
now = 0;
}
act(now);
}
timer = setInterval(play, 2000);
function act(n){
big.animate({ marginLeft : - n * li.width() }, 'slow');
icon.removeClass(on);
icon.eq(n).addClass(on);
}
icon.click(function(){
var idx = $(this).index();
now = idx;
act(now);
clearInterval(timer);
});
icon.hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(play, 2000);
});
</script>
</body>
</html>