代码：
//面向对象就是创建一个类，es6中创建类用class
//全局属性放在构造函数中，作为实例的私有属性，方法放在原型上，作为公有方法调用
class Carousel{
//私有属性放在constructor上
constructor(){
this.oWrap=$(".wrap");
this.boxBanner=this.oWrap.find(".boxbanner");
this.aImg=null;
this.oUl=this.oWrap.find("ul");
this.aLi=null;
this.aLeft=this.oWrap.find(".Left");
this.aRight=this.oWrap.find(".Right");
this.data=null;
this.n=null;
this.timer=null;
}
//公有方法直接创建函数
init(){
//所有逻辑思维的调用
//1 获取数据
this.getData();
//2 绑定数据
this.blind();
//3 图片延迟加载
setTimeout(()=>{
this.lazyImg();
},1000);
//4 图片自动轮播
//定时器中的回调函数的this指向window,利用箭头函数将this改为实例
clearInterval(this.timer);
this.timer=setInterval(()=>{
this.autoMove();
},2000);
//5 焦点的自动轮播
//6 鼠标移入停止，鼠标移出继续
this.cursorMouse();
//7 点击焦点手动切换
this.handleLi3();
//8 点击左右按钮手动切换
this.leftrightMove();
}
//函数的定义阶段
getData(){
//第一种方法：可以新建一个变量，储存住实例this;
//var _this=this;
$.ajax({
type: "get",
url: "data/data2.txt?"+Math.random(),
async: false,
dataType: "json",
//success函数中的this指向ajax对象
/*success:function (val) {
_this.data=val;//使用变量获取实例this
}*/
//第二种方法：利用箭头函数可以拿到实例this
success:(val)=>{
//此时this为实例this
this.data=val;
}
})
}
blind(){
var str="";
var strli="";
$.each(this.data,function (index, item) {
str+=`<img src="" realImg="${item.imgSrc}" alt="">`;
strli+=index==0?`<li class="active"></li>`:`<li></li>`;
});
str+=`<img src="" realImg="${this.data[0].imgSrc}" alt="">`;
this.boxBanner.html(str);
this.oUl.html(strli);
this.aImg=this.boxBanner.children("img");
this.boxBanner.css("width",this.aImg.length*this.aImg[0].offsetWidth);
this.aLi=this.oUl.children("li");
}
lazyImg(){
this.aImg.each(function (index, item) {
var frgImg=new Image();
frgImg.src=$(item).attr("realImg");
frgImg.onload=function () {
item.src=this.src;
frgImg=null;
};
frgImg.onerror=function () {
alert("图片加载错误");
}
});
}
autoMove(){
if(this.n>=this.aImg.length-1){
this.boxBanner.css("left",0);
this.n=0;
}
this.n++;
//this.n%=this.aImg.length;
this.boxBanner.stop().animate({left:-this.n*750},1000);
//n取值为1,2,3,4,1,2,3,4
this.autoMoveli();
}
autoMoveli(){
var i=this.n%(this.aImg.length-1);
this.aLi.eq(i).addClass("active").siblings("li").removeClass("active");
}
cursorMouse(){
this.oWrap.mouseover(()=>{
clearInterval(this.timer);
this.aLeft.show();
this.aRight.show();
}).mouseout(()=>{
this.aLeft.hide();
this.aRight.hide();
clearInterval(this.timer);
this.timer=setInterval(()=>{
this.autoMove();
},2000);
});
}
//焦点手动切换
//第一种方法：创建变量，保存实例this，然后使用时直接使用变量；
/*handleLi(){
var _this=this;
this.aLi.click(function () {
_this.n=$(this).index();
_this.boxBanner.stop().animate({left:-_this.n*750},1000);
_this.autoMoveli();
});
}*/
//第二种方法：利用点击事件中ev.target能获取点击事件的元素，利用箭头函数保证this始终为实例
/*handleLi2(){
this.aLi.click((ev)=> {
//箭头函数中的this为实例
//点击事件中ev.target代表被点击元素，为原生元素
this.n=$(ev.target).index();
this.boxBanner.stop().animate({left:-this.n*750},1000);
this.autoMoveli();
});
}*/
//第三种方法：利用实例each遍历aLi，然后获得索引值，利用箭头函数保证this始终指向实例；
handleLi3(){
this.aLi.each((index, item)=> {
//用箭头函数后，里面的this为实例
$(item).click(()=> {
this.n=index;
this.boxBanner.stop().animate({left:-this.n*750},1000);
this.autoMoveli();
})
});
}
leftrightMove(){
this.aRight.click(()=>{
this.autoMove();
});
this.aLeft.click(()=>{
if(this.n<=0){
this.n=this.aImg.length-1;
this.boxBanner.css("left",-this.n*750);
}
this.n--;
this.boxBanner.stop().animate({left:-this.n*750},1000);
this.autoMoveli();
})
}
}
class Carousel {
//私有属性
constructor(){
this.oWrap=$(".wrap");
this.oBox=$(".wrap .boxbanner");
this.oUl=$(".wrap ul");
this.oLeft=$(".wrap .Left");
this.oRight=$(".wrap .Right");
this.aImg=null;
this.aLi=null;
this.data=null;
this.timer=null;
this.imgWid=null;
this.m=null;
this.n=0;
this.init();
}
//公共方法
init(){
this.getData();
}
//获取后台数据
getData(){
var _this=this;
$.ajax({
url:"./ajax/data.txt",
type:"get",
dataType:"json",
success:function (val) {
_this.data=val;
_this.insertDom();
_this.autoMove();
_this. mouseEvent();
},
error:function (err) {
console.log(err);
}
})
}
//插入dom中
insertDom(){
var imgFrg=document.createDocumentFragment();
var liFrg=document.createDocumentFragment();
$(this.data).each(function (index,item) {
var oImg=new Image();
var oLi=document.createElement("li");
oImg.setAttribute("realImg",item.imgSrc);
if(index===0){
$(oLi).addClass("active");
}
imgFrg.append(oImg);
liFrg.append(oLi);
});
var extImg=new Image();
extImg.setAttribute("realImg",this.data[0].imgSrc);
imgFrg.append(extImg);
this.oBox.append(imgFrg);
this.oUl.append(liFrg);
imgFrg=null;
liFrg=null;
//获取img和li元素
this.aImg=this.oBox.children("img");
//img的个数
this.m=this.aImg.length;
//img的宽度
this.imgWid=this.aImg[0].offsetWidth;
this.aLi=this.oUl.children("li");
//需要重新设置宽高
this.oBox.css("width",this.imgWid*this.m);
this.oUl.css("width",this.aLi[0].offsetWidth*this.m+parseFloat($(this.aLi[1]).css("marginLeft"))*(this.m-2));
this.oUl.css("marginLeft",-this.oUl[0].offsetWidth/2);
//图片懒加载
setTimeout(this.showImgs.bind(this),300);
//手动点击li
this.handleLi();
}
//图片懒加载
showImgs(){
var _this=this;
this.aImg.each(function () {
_this.lazyLoad(this);
})
}
lazyLoad(ele){
if(ele.loaded) return;
var Img=new Image();
Img.src=ele.getAttribute("realImg");
Img.onload=function () {
ele.src=this.src;
ele.loaded=true;
Img=null;
};
Img.onerror=function () {
console.log("图片加载失败");
ele.loaded=true;
Img=null;
}
}
//自动轮播
autoMove(){
clearInterval(this.timer);
this.timer=setInterval(this.move.bind(this),3000);
}
move(){
if(this.n===this.m-1){
this.n=0;
this.oBox.css("left",0);
}
this.n++;
this.animaTo();
}
animaTo(){
this.oBox.stop().animate({
left:-this.n*this.imgWid
},1000);
this.autoLi();
}
//li自动轮播
autoLi(){
var s=this.n%5;
this.aLi.eq(s).addClass("active").siblings("li").removeClass("active");
}
//鼠标事件
mouseEvent(){
this.oWrap.mouseover(()=>{
clearInterval(this.timer);
this.oLeft.show();
this.oRight.show();
}).mouseout(()=>{
this.autoMove();
this.oLeft.hide();
this.oRight.hide();
});
this.oLeft.click(()=>{
if(this.n===0){
this.n=this.m-1;
this.oBox.css("left",-this.n*this.imgWid);
}
this.n--;
this.animaTo();
});
this.oRight.click(this.move.bind(this));
}
//手动点击li达到跳转效果
handleLi(){
this.aLi.each((index,item)=>{
$(item).click((e)=>{
this.n=$(e.target).index();
this.animaTo();
})
})
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>es6+面向对象+jQuery版左右切换轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 750px;
height: 292px;
margin: 30px auto;
position: relative;
background: url("image1/7.png") center no-repeat lightslategray;
background-size: cover;
overflow: hidden;
}
.wrap .boxbanner{
position: absolute;
left: 0;
top: 0;
width: 3000px;
height: 292px;
}
.wrap .boxbanner img{
float: left;
width: 750px;
height: 292px;
vertical-align: middle;
border: 0;
}
.wrap ul{
position: absolute;
width: 140px;
left: 50%;
margin-left: -70px;
bottom: 10px;
}
.wrap ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: lightslategray;
float: left;
cursor: pointer;
}
.wrap ul li+li{
margin-left: 20px;
}
.wrap ul li.active{
background-color: orangered;
}
.wrap a{
position: absolute;
width: 43px;
height: 67px;
top:50%;
margin-top: -30px;
background-image: url("image1/6.png");
background-repeat: no-repeat;
opacity: 0.5;
filter: alpha(opacity=50);
display: none;
}
.wrap a.Left{
left: 10px;
background-position: 0 0;
}
.wrap a.Right{
right: 10px;
background-position: -63px 0;
}
.wrap a:hover{
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<div class="wrap">
<div class="boxbanner">
<!--<img src="image1/1.jpg" alt="">
<img src="image1/2.jpg" alt="">
<img src="image1/3.jpg" alt="">
<img src="image1/4.jpg" alt="">-->
</div>
<ul>
<!--<li class="active"></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<a href="javascript:void(0);" class="Left"></a>
<a href="javascript:void(0);" class="Right"></a>
</div>
<script src="jquery.js"></script>
<script src="banner2.js"></script>
<script>
new Carousel();
</script>
</body>
</html>
网友评论