<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
*{padding: 0px;margin:0px;}
.x{margin:30px 30px;text-align: center;}
.box,.nav-menu{position: relative;}
.box{width: 1024px;height: 264px;overflow: hidden;zoom: 1;margin:10px auto;}
.box ul li{ width:100%;
position:absolute;
height:298px;
float:left;
overflow:hidden;}
ul li{list-style: none;}
.nav-menu{left: 950px;bottom: 25px;}
.nav-menu ul li{float: left;background-color: black;color:#fff;margin-left: 1px;width:20px;height: 20px;}
.nav-menu .m{color: red; width: 25px;height: 25px;line-height: 24px;margin-top:-3px; border-radius: 25px;}
</style>
<script type="text/javascript">
$(function(){
var swidth=$('.box').width();
var len=$('.box ul li').length;
var times;
var index=0;
$('.nav-menu ul li').click(function(){
$(this).addClass('m').siblings('li').removeClass('m');
var index=$(this).index();
show(index);
})
$('.box ul').css('width',swidth*(len));
$('.box').hover(function(){
clearInterval(times);
},function(){
times=setInterval(function(){
show(index);
index++;
if(index==len){index=0}
},2000)
})
function show(index){
var lef=-index*swidth;
//$('.box ul li').stop(true,false).animate({left:lef},1000);
$('.box ul li').eq(index).fadeIn('slow').siblings('li').fadeOut('slow');
$('.nav-menu ul li').removeClass('m').eq(index).addClass('m');
}
})
</script>
</head>
<body>
<div class="x">
<div class="box">
<ul>
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
</ul>
</div>
<div class="nav-menu">
<ul>
<li class='m'>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>
