<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>Carousel</title>
<script src="http://a.tbcdn.cn/apps/dts/th3/js/jquery.js"></script>
<link rel="stylesheet" href="http://a.tbcdn.cn/apps/dts/th3/css/??public.css"/>
</head>
<body>
<div class="" style="width:800px;margin:0 auto">
<style>
.curbox{width:570px;height:280px; position:relative;background:#FC9}
.curwarp{width:570px;height:280px;overflow:hidden;position:relative }
.curwarp .content{width:570px;height:500em;overflow:hidden;position:absolute;left:0;top:0;}
.curwarp .content li{cursor:all-scroll;width:570px;height:280px;}
.curwarp .content li,.nav li{float:left}
.nav{position:absolute;bottom:10px;right:10px;width:100px;background:#f60}
.nav li{width:25px;color:#0f0;text-align:center;cursor:pointer}
.nav li.cur{background:#666;}
.btn .next,.btn .prev{position:absolute;font-size:30px;top:140px;cursor:pointer;color:#0f0}
.btn .next{right:20px;}
.btn .prev{left:20px;}
.btn .disable{color:#ccc;}
</style>
<div class="curbox">
<div class="curwarp">
<ul class="content">
<li><img src="http://img02.taobaocdn.com/tps/i2/T1TVSwXkR3XXXXXXXX-570-280.png"></li>
<li><script type="text/templ"><img src="http://img03.taobaocdn.com/tps/i3/T1U_CwXk4YXXXXXXXX-570-280.png"></script></li>
<li><script type="text/templ"><img src="http://img03.taobaocdn.com/tps/i3/T1CMCxXa4iXXXXXXXX-570-280.jpg"></script></li>
<li><script type="text/templ"><img src="http://img03.taobaocdn.com/tps/i3/T1EFCrXetlXXXXXXXX-570-280.png"></script></li>
</ul>
</div>
<ul class="nav">
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="btn">
<li class="prev disable">prev</li>
<li class="next">next</li>
</ul>
</div>
</div>
<script>
$(function(){
var $content = $(".content"),
g_index =0,
len =4,
timer=null;
width = $(".curwarp .content").find('li').outerHeight(true);
$('.nav li').mouseenter(function(){
var $this= $(this),
index = $this.index();
anim(index);
})
function anim(index) {
var $lis = $('.nav li');
if (index ===3){
$(".next").addClass("disable")
}
else{
$(".next").removeClass("disable");
}
if(index ===0){
$(".prev").addClass("disable");
}
else{
$(".prev").removeClass("disable");
}
var currcon=$(".content li").eq(index),
script=currcon.find("script[type='text/templ']");
if(script.length >0){
currcon[0].innerHTML=script.html();
}
$lis.eq(index).addClass('cur').siblings().removeClass('cur');
$content.stop(true,true).animate({top:-index*width},600,function(){
g_index = index;
});
}
$(".prev").click(function(){
if(g_index ===0){$(this).addClass("disable");return;}
g_index = (len -1+ g_index)%len;
anim(g_index);
})
$(".next").click(function(){
if (g_index ===3) {$(this).addClass("disable");return;}
g_index = (g_index+1)%len;
anim(g_index);
})
function auto(){
timer=setTimeout(function(){
g_index = (g_index+1)%len;
anim(g_index);
timer=setTimeout(arguments.callee,3500);
},2000)
}
auto();
$(".curbox").hover(function(){
clearTimeout(timer);
},function(){
auto();
}
)
})
</script>
</body>
</html>
