<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>轮播效果</title>
<style>
*{
margin: 0px ;
padding: 0px;
}
body {
background: green;
}
.box{
width: 600px;
height: 400px;
margin: 50px auto;
overflow:hidden;
position: relative;
}
.ctrl{
width: 50px;
height: 50px;
color: red;
font-size: 50px;
text-align:center;
line-height:50px;
background: none;
border: none;
outline: none;
cursor: pointer;
position: absolute;
z-index: 10;
top: 40%;
display: none;
}
.next {
right: 0;
}
.content{
width: 1800px;
height: 400px;
position: relative;
left:-600px;
}
img {
display: block;
float: left;
width: 600px;
height: 400px;
}
.dot{
width: 100%;
height: 50px;
background: aqua;
position: relative;
bottom: 50px;
text-align: center;
line-height: 50px;
}
.dot div {
display: inline-block;
width: 14px;
height: 14px;
background: white;
border: 1px solid red;
border-radius: 8px;
}
.dot .selected{
background: purple;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<button class="ctrl prev"><</button>
<button class="ctrl next"> > </button>
<div class="content">
<img src="03.jpg" >#写你自己的图片路径就可以了
<img src="01.jpg" >
<img src="02.jpg" >
</div>
<div class="dot">
<div class="selected"></div>
<div></div>
<div></div>
</div>
</div>
</body>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script >
$(function() {
//记录现实的序号
var index=0
$('.box').hover(function() {
$('.ctrl').show(300)
},function() {
$('.ctrl').hide(300)
})
//prev 按钮
$('.prev').click(function() {
//若内容正在动画，则立即返回
if ($('.content').is(':animated')){
return
}
$('.content').animate({left:0},'slow','linear',function() {
//动画结束后，将最后一张图查到最开头
$('.content').prepend($('img:last'))
//重新设置偏移
$('.content').css('left','-600px')
//记录图片序号
if(--index==-1){
index=2
}
$('.dot div').eq(index).addClass('selected').siblings().
removeClass('selected')
})
$('.dot div').eq(index).click()
})
//next 按钮
$('.next').click(function() {
//若内容正在动画，则立即返回
if ($('.content').is(':animated')){
return
}
$('.content').animate({left:'-1200px'},'slow','linear',function() {
//动画结束后，将最后一张图查到最开头
$('.content').append($('img:first'))
//重新设置偏移
$('.content').css('right','-600px')
if(++index==3) {
index=0
}
$('.dot div').eq(index).addClass('selected').siblings().
removeClass('selected')
})
})
})
</script>
</html>
