jQuery轮播图实现

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;

//左右箭头点击事件

$('.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);

})

})