html:
備注：圖片width：730px height:454px
css:
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
width: 730px;
height: 454px;
position: relative;
overflow: hidden;
margin: 50px auto;
}
.container .list {
width: 5110px;
height: 454px;
position: absolute;
top: 0;
left: 0;
}
.list li {
float: left;
width: 730px;
}
img {
border: none;
width: 100%;
}
.container .arrow {
width: 50px;
height: 60px;
text-align: center;
line-height: 60px;
display: none;
text-decoration: none;
position: absolute;
top: 197px;
z-index: 2;
color: #FFFFFF;
font-size: 30px;
border-radius: 10px;
background: rgba(50, 54, 57, .5);
}
.container:hover .arrow {
display: block;
}
.container .pre {
left: 10px;
}
.container .next {
right: 10px;
}
.container .dot {
position: absolute;
bottom: 20px;
right: 20px;
}
.dot span {
border-radius: 5px;
width: 25px;
text-align: center;
display: inline-block;
background:rgba(142, 227, 145,.6);
}
.dot .active{
color: #FFFFFF;
background: #b0d61f;
}
js:
$(function() {
var timer = null;
var index = 0;
//左右箭頭點(diǎn)擊事件
$('.next').click(nextRun);
$('.pre').click(preRun);
function nextRun() {
if(index < 5) {
index++;
$('.list').animate({
'left': index * -730
}, 1000);
} else {
index = 0;
$('.list').animate({
'left': 6 * -730
}, 1000, function() {
$('.list').css({
'left': 0
}, 1000);
})
}
dots();
}
function preRun() {
if(index > 0) {
index--;
$('.list').animate({
'left': index * -730
}, 1000);
} else {
index = 5;
$('.list').css({
'left': 6 * -730
}, 1000);
$('.list').animate({
'left': index * -730
}, 1000);
}
dots();
}
function dots() {
$('.dot span').eq(index).addClass('active').siblings().removeClass('active');
}
function autoPlay() {
timer = setInterval(nextRun, 2000);
}
autoPlay();
$('.container').hover(function() {
clearInterval(timer);
}, function() {
autoPlay();
})
$('.dot span').click(function() {
index = $(this).index();
dots();
$('.list').animate({
'left': index * -730
}, 1000);
})
})
