面向对象之轮播
2017-06-26 本文已影响0人
李永州的FE
轮播
思路就是点击向右滑动时，使用animate让图片改变整个图片的位移，并且给计数器加一同时判断是不是滑到最后一个了，如果本身就是最后一个，则重新设置位移，最后还要设置移动后下面定位图片光标的栏目样式，自己写一个了轮播大概要多久可以试试
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>轮播2</title>
<style type="text/css">
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 {
display: inline-block;
}
.carousel .bullet>li {
display: inline-block;
width: 20px;
height: 6px;
border-radius: 3px;
background-color: #fff;
margin: 0 5px;
cursor: pointer;
}
.carousel .bullet .active {
background-color: #666;
}
</style>
</head>
<body>
<div class="carousel">
<ul class="img-ct" style="width: 1800px; left: -300px;"><li data-index="3">
<a href=""></a>
</li>
<li data-index="0">
<a href=""></a>
</li>
<li data-index="1">
<a href=""></a>
</li>
<li data-index="2">
<a href=""></a>
</li>
<li data-index="3">
<a href=""></a>
</li>
<li data-index="0">
<a href=""></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>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var Carousel = (function(){
function _Carousel($ct){
this.$ct = $ct;
this.init();
this.bind();
}
_Carousel.prototype.init = function(){
var $imgCt = this.$imgCt = this.$ct.find('.img-ct'),
$preBtn = this.$preBtn = this.$ct.find('.btn-pre'),
$nextBtn = this.$nextBtn = this.$ct.find('.btn-next'),
$bullet = this.$bullet = this.$ct.find('.bullet');
var $firstImg = $imgCt.find('li').first(),
$lastImg = $imgCt.find('li').last();
this.curPageIndex = 0;
this.imgLength = $imgCt.children().length;
this.isAnimate = false;
this.imgWidth = $firstImg.width();
$imgCt.prepend($lastImg.clone());
$imgCt.append($firstImg.clone());
$imgCt.width( this.imgWidth * $imgCt.children().length );
$imgCt.css({"left":0-this.imgWidth});
};
_Carousel.prototype.bind = function(){
var _this = this;
this.$preBtn.on('click',function(e){
e.preventDefault();
_this.playPre();
});
this.$nextBtn.on('click',function(e){
e.preventDefault();
_this.playNext();
});
this.$bullet.on('click','li',function(e){
var idx = $(this).index();
if(idx>_this.curPageIndex){
_this.playNext(idx-_this.curPageIndex);
}else if (idx<_this.curPageIndex) {
_this.playPre(_this.curPageIndex-idx);
}
})
};
_Carousel.prototype.playPre = function(idx){
var _this = this,
idx = idx || 1;
if(this.isAnimate) return;
this.isAnimate = true;
this.$imgCt.animate({
left:'+='+this.imgWidth*idx
},function(){
_this.curPageIndex = (_this.imgLength+_this.curPageIndex-idx)%_this.imgLength;
_this.setBullet();
if(_this.curPageIndex === _this.imgLength-1){
_this.$imgCt.css({left:0-_this.imgWidth*_this.imgLength});
}
});
this.isAnimate = false;
};
_Carousel.prototype.playNext = function(idx){
var _this = this,
idx = idx || 1;
if(this.isAnimate) return;
this.isAnimate = true;
this.$imgCt.animate({
left:'-='+this.imgWidth*idx
},function(){
_this.curPageIndex = (_this.curPageIndex+idx)%_this.imgLength;
_this.setBullet();
if(_this.curPageIndex === 0){
_this.$imgCt.css({left:0-_this.imgWidth});
}
});
this.isAnimate = false;
};
_Carousel.prototype.setBullet = function(){
this.$bullet.children().removeClass('active')
.eq(this.curPageIndex).addClass('active')
};
return {
init:function($ct){
$ct.each(function(index,node){
new _Carousel($(node));
})
}
}
})();
Carousel.init($('.carousel'));
// new _Carousel($('._carousel').eq(0));
// new _Carousel($('._carousel').eq(1));
</script>
</body></html>
