首页 / JAVASCRIPT / js轮播图的插件化封装
js轮播图的插件化封装
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js轮播图的插件化封装，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4450字，纯文字阅读大概需要7分钟。
内容图文
现在的网站经常会有一些图片轮播效果，网上也有很多各式各样的图片轮播插件，什么样的效果都有，这里分享一个我自己写的图片轮播效果这个Lightbox有一个窗口容器，容器里面有一个长的容器，横向包住了所有图片，通过改变他的margin-left来实现左右效果的。
图片下方有图片个数对应的黑方块，点击黑方块也可以跳到对应的图片上去；
这个插件的最大的特点是可以根据里面的图片个数来实现切换，而且当滑到最后一张图片的时候时，再次点击右侧的按钮，右边回出现第一张图片，这样实现了循环播放。
图片的样式和按钮的样式我没有来得及调试，大家可以按照自己想要的效果来更改css
具体代码如下:
~function(){function AutoBanner(curEleId,ajaxURL,interval){//把之前存储获取元素的变量都作为当前实例的私有属性this.banner = document.getElementById(curEleId);this.bannerInner = utils.firstChild(this.banner);this.bannerTip = utils.children(this.banner,"ul")[0];this.bannerLink = utils.children(this.banner,'a');this.bannerLeft = this.bannerLink[0];this.bannerRight = this.bannerLink[1];this.divList = this.bannerInner.getElementsByTagName('div');this.imgList = this.bannerInner.getElementsByTagName('img');this.oLis = this.bannerTip.getElementsByTagName('li');//之前的全局变量也应该变为自己的私有属性this.jsonData = null;this.interval = interval || 3000;this.autoTimer = null;this.step = 0;this.ajaxURL = ajaxURL;//返回当前实例return this.init();
}
AutoBanner.prototype = {
constructor:AutoBanner,//Ajax请求数据getData:function(){var _this = this;var xhr = new XMLHttpRequest;
xhr.open("get",this.ajaxURL + "?_="+Math.random(),false);
xhr.onreadystatechange = function(){if(xhr.readyState ===4 && /^2\d{2}$/.test(xhr.status)){
_this.jsonData = utils.formatJSON(xhr.responseText)
}
}
xhr.send(null)
},//实现数据绑定bindData:function(){var str = "",str2 = "";if(this.jsonData){for(var i = 0,len=this.jsonData.length;i<len;i++){var curData = this.jsonData[i];
str+='<div><img src="" alt="" trueImg="'+curData['img']+'"></div>';
i===0?str2+="<li class='bg'></li>":str2+="<li></li>"}
}this.bannerInner.innerHTMl = str;this.bannerTip.innerHTML = str2;
},//延迟加载lazyImg:function(){var _this = this;for(var i = 0,len = this.imgList.length;i<len;i++){~function(i){var curImg = _this.imgList[i];var oImg = new Image;
oImg.src = curImg.getAttribute('trueImg');
oImg.onload = function(){
curImg.src = this.src;
curImg.style.display = block;//只对第一张处理if(i===0){var curDiv = curImg.parentNode;
curDiv.style.zIndex = 1;
myAnimate(curDiv,{opacity:1},200);
}
oImg = null;
}
}(i)
}
},//自动轮播autoMove:function(){if(this.step === this.jsonData.length-1){this.step = -1}this.step++;this.setBanner();
},//切换效果和焦点对齐setBanner:function(){for(var i = 0,len = this.divList.length;i<len;i++){var curDiv = this.divList[i];if(i===this.step){
utils.css(curDiv,"zIndex",1)//2、让当前的透明度从0变为1,当动画结束，我们需要让其他的div的透明度的值直接变为0myAnimate(curDiv,{opacity:1},200,function(){var curDivSib = utils.siblings(this);for(var k = 0,len = curDivSib.length;k<len;k++){
utils.css(curDivSib[k],'opacity',0)
}
})continue}
utils.css(curDiv,"zIndex",0)
}//实现焦点对其for(i = 0,len = this.oLis.length;i<len;i++){var curLi = this.oLis[i];
i === this.step?utils.addClass(curLi,"bg"):utils.removeClass(curLi,"bg");
}
},//控制自动轮播mouseEvent:function(){var _this = this;this.banner.onmouseover = function(){
window.clearInterval(_this.autoTimer);
_this.bannerLeft.style.display = _this.bannerRight.style.display = "block"}this.banner.onmouseout = function(){
_this.autoTimer = window.setInterval(function(){
_this.autoMove.call(_this)
},_this.interval);
_this.bannerLeft.style.display = _this.bannerRight.style.display = "none"}
},//实现焦点切换tipEvent:function(){var _this = this;for(var i = 0,len = this.oLis.length;i<len;i++){var curLi = this.oLis[i];
curLi.index = i;
curLi.onclick = function(){
_this.step = this.index;
_this.setBanner();
}
}
},//实现左右切换leftRight:function(){var _this = this;this.bannerRight.onclick = function(){
_this.autoMove();
};this.bannerLeft.onclick = function(){if(_this.step === 0){
_this.step = _this.jsonData.length;
}
_this.step--;
_this.setBanner();
}
},//当前插件的唯一入口 命令模式:init相当于指挥室，指挥各军队协同作战init:function(){var _this = this;this.getData();this.bindData();
window.setTimeout(function(){
_this.lazyImg();
},500);this.autoTimer = window.setInterval(function(){
_this.autoMove();
},this.interval);this.mouseEvent();this.tipEvent();this.leftRight();return this;
}
}
window.AutoBanner = AutoBanner
}()//使用var banner1 = new AutoBanner('banner','json/banner.txt',1000)以上就是js轮播图的插件化封装的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的js轮播图的插件化封装全部内容，希望文章能够帮你解决js轮播图的插件化封装所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】