html
<div class="list">
<div class="content">
<img src="./image/1.jpg" alt="">
<img src="./image/2.jpg" alt="">
<img src="./image/3.jpg" alt="">
<img src="./image/4.jpg" alt="">
<img src="./image/5.jpg" alt="">
<img src="./image/1.jpg" alt="">
</div>
<div class="btns">
<span class="choose"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="prev"><</div>
<div class="next">></div>
</div>
2 css
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.list {
width: 560px;
height: 300px;
margin: 10px auto;
position: relative;
overflow: hidden;
}
.content {
width: 4200px;
height: 300px;
font-size: 0;
position: absolute;
}
.content img {
width: 560px;
height: 300px;
}
.prev,
.next {
position: absolute;
top: 50%;
width: 30px;
height: 50px;
margin-top: -25px;
color: #fff;
background-color: rgba(0,0,0,0.6);
font-size: 30px;
text-align: center;
line-height: 50px;
}
.prev {
left: 0;
}
.next {
right: 0;
}
.btns {
position: absolute;
left: 0;
right: 0;
bottom: 30px;
text-align: center;
}
.btns span {
padding: 6px;
margin: 0 6px;
font-size: 0;
background-color: #fff;
border-radius: 50%;
}
.btns span.choose {
background-color: #f00;
}
</style>
3 js
<script src="./jquery/jquery.js"></script>
<script>
var $content = $('.content');
var $btns = $('.btns span');
var index = 0;
var timeber;
function startInterval(){
timeber = setInterval(function(){
index++;
change()
},3000)
}
startInterval();
function change(fn){
$content.animate({left: index *-560},500,function(){
if (index === 5){
index = 0;
$content.css('left',-560 * index);
}
$btns
.eq(index).addClass('choose')
.siblings().removeClass('choose')
fn && fn();
});
}
$btns.click(function(){
clearInterval(timeber);
index = $(this).index();
change(startInterval);
})
$('.next').click(function(){
clearInterval(timeber);
index ++;
if (index >= 6){
index = 0;
}
change(startInterval);
})
$('.prev').click(function(){
clearInterval(timeber);
index --;
if (index < 0){
index = 4;
$content.css('left',-560 * 5);
}
change(startInterval);
})
</script>