jQuery轮播图

上个文章给大家讲解了什么是面向对象编程今天我就用jQuery+面向对象的方式封装一个可选择透明度或者左右移动的轮播图。
废话不多说，直接上代码

css样式及html代码

<style>

*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#banner{
width: 590px;
height: 470px;
margin: 0 auto;
position: relative;
}
#banner .banner-img li{
width: 590px;
height: 470px;
float: left;
/* position: absolute; */
}
#banner .banner-img li img{
width: 590px;
height: 470px;
}
#banner .banner-tab{
position: absolute;
bottom: 20px;
left: 10px;
z-index: 999;
}
#banner .banner-tab li{
float: left;
height: 10px;
width: 10px;
background: rgba(86, 223, 215, 0.7);
border-radius: 50%;
margin-right: 10px;
font-size: 10px;
}
#banner .banner-tab .active{
background: rgb(5, 70, 247);
}
#banner .rbtn{
width: 30px;
height: 30px;
background: #fff;
opacity: 0.7;
position: absolute;
top:45%;
right: 0;
border: 0;
font-size: 20px;
color: #ccc;
z-index: 999;
}
#banner .lbtn{
width: 30px;
height: 30px;
background: #fff;
opacity: 0.7;
position: absolute;
top:45%;
left: 0;
border: 0;
font-size: 20px;
color: #ccc;
z-index: 999;
}

</style>

<div id="banner">
<ul class="banner-img">
<li>
<a href="#"><img src="images/timg01.jpg"/></a>
</li>
<li>
<a href="#"><img src="images/timg02.jpg"/></a>
</li>
<li>
<a href="#"><img src="images/timg03.jpg"/></a>
</li>
<li>
<a href="#"><img src="images/timg04.jpg"/></a>
</li>
<li>
<a href="#"><img src="images/timg05.jpg"/></a>
</li>
<li>
<a href="#"><img src="images/timg06.jpg"/></a>
</li>
</ul>
<ol class="banner-tab">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<button class="lbtn"><</button>
<button class="rbtn">></button>
<div>
<script src="jquery-1.11.3.js"></script>

js代码

移动轮播我用了滚动条移动感觉这个要比定位移动流畅，上js代码

/*
node:输入dom元素，type:输入move:左右移动轮播 不输入就是透明度轮播
banner(node,type)
dom结构
<div>=>node
<ul class="banner-img"><li>图片<li></ul>
<ol class='banner-tab'><li></li></ol> 需要设置class名字active的样式
<button class="lbtn"><</button>不要按钮可以不创建或者只建一个也行
<button class="rbtn">></button>
</div>
需要jquery
*/

(function(){//防止外面修改属性
//ECMA6 class
class Banner{
constructor(node,type){
this.node = node;
this.imgs = node.find('.banner-img');
this.img = this.imgs.find('li');
this.btns = node.find('.banner-tab');
this.rBtn = node.find('.rbtn');
this.lBtn = node.find('.lbtn');
this.timer;
if(type == 'move'){
this.timer1;
this.index = 1; //下标
this.box = $(`<div></div>`);//创建一个div包裹this.img让滚动条运动
this.box.css({width:this.img.width(),height:this.img.height(), overflow: 'hidden'});
$(this.imgs).prependTo(this.box);
$(this.box).prependTo(node);
this.displacement = this.box.width();//每一次的移动距离
$(this.img[0]).clone(true).appendTo(this.imgs);//把第一张图片复制后插到最后面
$(this.img[this.img.length - 1]).clone(true).prependTo(this.imgs);//把最后一张图片复制后插到最前面
$(this.imgs).width(this.displacement * (this.img.length + 2));//因为新插入了两张图片所以长度+2
this.box.scrollLeft(this.displacement); //显示第一张图片的滚动条位置位置
} else{
this.index = 0;//下标
this.img[0].style.zIndex = 100;//让第一张图片显示在前面
}
this.btns.find('li').eq(0).addClass("active");//给ol下第一个li设置样式
}

init(type){
this.autoMove(type);
this.tabSwitching(type);
this.btnSwitching(type);
return this;//返回一个实例
}

autoMove(type){
this.timer = setInterval(()=>{
this.index++;
this.tabMove(type);
},2500)
}

tabMove(type){
//判断左右移动轮播和透明度轮播
if(type == 'move'){
this.btns.find('li').removeClass("active").eq(this.index - 1).addClass("active");//先把所有li的class删除再给当前li的class设置
if(this.index == this.img.length + 1){   //this.index走到新插入的最后图片的下标时this.btns的第一个li设置样式
this.btns.find('li').eq(0).addClass("active");
}

if(this.index == this.img.length + 2){//this,index走到超出索引时把滚动条拉到原本的第二张图片
this.index = 2;
this.box.scrollLeft(this.displacement * (this.index - 1));
this.btns.find('li').eq(1).addClass("active");
}

if(this.index < 0){//下标小于0时返回最后一张图片的下标
this.index = this.img.length -1;
this.box.scrollLeft(this.displacement * (this.index + 1));
}
this.scrollMove();//滚动条移动
} else{
if(this.index == this.img.length){//下标到最后一张图片时变回第一张图片
this.index = 0;
}
if(this.index < 0){
this.index = this.img.length - 1;
}
this.btns.find('li').removeClass("active").eq(this.index).addClass("active");//先把所有li的class删除再给当前li的class设置
this.img.hide().css("opacity", 0.2).eq(this.index).show().animate({opacity: 1}, 800);
}
}

tabSwitching(type){
this.btns.on('mouseover',(e)=>{//箭头函数没有this指向所以使用上一层函数的this
if(e.target.nodeName == 'LI'){//判断是否是li
clearInterval(this.timer);//清除计时器
if(type == 'move'){ //判断type
this.index = $(e.target).index() + 1;
} else{
this.index = $(e.target).index();
}
this.tabMove(type);
this.autoMove(type);//重新启动
}
});

}

btnSwitching(type){
this.rBtn.on('click',()=>{
clearInterval(this.timer);//清除计时器
this.index++;
this.tabMove(type);
this.autoMove(type);//启动运动
});
this.lBtn.on('click',()=>{
clearInterval(this.timer);//清除计时器
this.index--;
this.tabMove(type);
this.autoMove(type);//启动运动
})
}

//滚动条移动
scrollMove(){
clearInterval(this.timer1);//清除计算器
var minStep = 0;//起始步数
var maxStep = 20;//最大步数
var start = this.box.scrollLeft();//运动起始位置
var end = this.index * this.displacement;//结束位置
var everyStep = (end - start)/maxStep;//每一步的距离
this.timer1 = setInterval(()=>{
minStep++;
if (minStep >= maxStep) {//判断到达最大步数
clearInterval(this.timer1);//清除计算器
}
start += everyStep;//起始位置加上走的距离
this.box.scrollLeft(start);
},20);
}
}

//对外接口
window.banner = function(node,type){
return new Banner(node,type).init(type);//返回一个实例对象并初始化
}

})();

banner($('#banner'),'move');//这是移动

上面的代码要换透明度的话就是吧ul下面的li的浮动改成定位，这样调用banner($(’#banner’))就可以了

结尾

如果文章中有什么不足或者错误的地方欢迎大家留言分享。如果我的文章能帮到你的话那就给我个点赞和关注，谢谢朋友们的支持。

• 点赞 41
• 收藏
• 分享
• 文章举报