轮播源码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<style>
ul,li{
list-style:none;
margin: 0;
padding: 0;
}
.carousel{
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.carousel .img-ct{
position: absolute;
height: 200px;
width: 1200px;
}
.carousel .img-ct:after{
content: '';
display: block;
clear: both;
}
.carousel .img-ct>li{
float: left;
}
.carousel .img-ct img{
width: 300px;
height: 200px;
}
.carousel .btn{
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 18px;
text-decoration: none;
color: #fff;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
display: block;
}
.carousel .btn-pre{
left: 10px;
}
.carousel .btn-next{
right: 10px;
}
.carousel .bullet-ct{
position: absolute;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
}
.carousel .bullet{
/* position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 20px;
width: 150px;*/
display: inline-block;
}
.carousel .bullet:after{
/* content: '';
display: block;
clear: both;*/
}
.carousel .bullet>li{
/*float: left;*/
display: inline-block;
width: 20px;
height: 6px;
border-radius: 3px;
background-color: #fff;
margin: 0 5px;
}
.carousel .bullet .active{
background-color: #666;
}
</style>
</head>
<body>
<div class="carousel">
<ul class="img-ct">
<li data-index=0><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="1.jpg"></a></li>
<li data-index=1><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="2.jpg"></a></li>
<li data-index=2><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="3.jpg"></a></li>
<li data-index=3><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="4.jpg"></a></li>
</ul>
<a class="btn btn-pre" href="#"><</a>
<a class="btn btn-next" href="#">></a>
<div class="bullet-ct">
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// $(function(){
var $imgCt = $('.img-ct'),
$preBtn = $('.btn-pre'),
$nextBtn = $('.btn-next'),
$bullet = $('.bullet');
var $firstImg = $imgCt.find('li').first(),
$lastImg = $imgCt.find('li').last();
var curPageIndex = 0;
var imgLength = $imgCt.children().length;
var isAnimate = false;
$imgCt.prepend($lastImg.clone())
$imgCt.append($firstImg.clone())
$imgCt.width($firstImg.width() * $imgCt.children().length)
$imgCt.css('left', '-300px')
$preBtn.on('click', function(e){
e.preventDefault();
playPre();
})
$nextBtn.on('click', function(e){
e.preventDefault();
playNext();
})
function playNext(n){
if(isAnimate) return;
isAnimate = true;
$imgCt.animate({
left: '-=300'
}, function(){
curPageIndex++;
if(curPageIndex === imgLength){
$imgCt.css({'left': '-300px'})
curPageIndex = 0
}
isAnimate = false;
setBullet();
})
}
function playPre(){
if(isAnimate) return;
isAnimate = true;
$imgCt.animate({
left: '+=300'
}, function(){
curPageIndex--;
if(curPageIndex < 0){
$imgCt.css('left', -(imgLength*$firstImg.width()));
curPageIndex = imgLength - 1
}
isAnimate = false;
setBullet()
})
}
function setBullet(){
$bullet.children()
.removeClass('active')
.eq(curPageIndex)
.addClass('active')
}
// })
</script>
</div>
</body>
</html>