我找的是京东的轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播</title>
<script src="jQuery.js"></script>
<style>
div,ul,li,button,img{
margin:0;
padding:0;
}
#wu{
590px;
height:470px;
margin:100px auto;
overflow: hidden;
position:relative;
}
img{
100%;
height:100%;
}
#hild{
2360px;
height:470px;
position:absolute;
}
#hild>.ya{
590px;
height:470px;
float:left;
}
#hild>.ya:nth-of-type(1){
display:block;
}
#wu>button{
50px;
height:100px;
position:absolute;
font-size:50px;
text-align: center;
line-height: 100px;
border:none;
outline:none;
background:#000;
color:#fff;
opacity: .5;
}
#wu>button:nth-of-type(1){
top:50%;
left:0;
margin-top:-50px;
}
#wu>button:nth-of-type(2){
top:50%;
right:0;
margin-top:-50px;
}
#list{
list-style: none;
position:absolute;
bottom:20px;
left:150px;
}
#list>li{
float:left;
20px;
height:20px;
border-radius: 50%;
background:#ccc;
border:#ccc 2px solid;
margin-left:30px;
}
#list>li:nth-of-type(1){
background:red;
}
.clearfix:after,.clearfix:before{
content: "";
display:block;
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<div id="wu">
<div id="hild" class="clearfix">
<div class="ya">
<img src="img/01.jpg" alt="" />
</div>
<div class="ya">
<img src="img/02.jpg" alt="" />
</div>
<div class="ya">
<img src="img/03.jpg" alt="" />
</div>
<div class="ya">
<img src="img/04.jpg" alt="" />
</div>
</div>
<button><</button>
<button>></button>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
$(function(){
var num=0;
//具体的定时器事件
function fn(){
num++
if(num>3){
num=0;
}
$("#hild").animate({
"left":"-590"*+num+"px"
})
$("li").css("background","#CCCCCC");
$("li").eq(num).css("background","red");
}
var t=setInterval(fn,1000)
//用定时器完成；
//滑动事件
$("#wu").hover(function(){
clearInterval(t);
},function(){
clearInterval(t);
t=setInterval(fn,1000);
})
//左按钮的点击事件
$("button").eq(0).click(function(){
num--;
if(num<0){
num=3
}
$("#hild").stop().css("left","-590"*+num+"px");
$("li").css("background","#CCCCCC");
$("li").eq(num).css("background","red");
})
//右按钮的点击事件
$("button").eq(1).click(function(){
num++;
if(num>3){
num=0
}
$("#hild").stop().css("left","-590"*+num+"px");
$("li").css("background","#CCCCCC");
$("li").eq(num).css("background","red");
})
//原点的点击事件
$("li").each(function(){
$("li").click(function(){
var o=$(this).index()
$("li").css("background","#ccc");
$(this).css("background","red");
$("#hild").stop().css("left","-590"*+o+"px");
num=o;
})
})
})
</script>