Home > Article > Web Front-end > Plug-in encapsulation of js carousel chart
Nowadays websites often have some picture carousel effects. There are also many various picture carousel plug-ins on the Internet. They have all kinds of effects. Here I will share a picture carousel I wrote myself. Playback effect
This Lightbox has a window container. There is a long container inside the container, which covers all the pictures horizontally. The left and right effects are achieved by changing its margin-left.
There is a black square corresponding to the number of pictures below the picture. Click the black square to jump to the corresponding picture;
The biggest feature of this plug-in is that it can be based on the number of pictures inside. Implement switching, and when sliding to the last picture, click the button on the right again, and the first picture will appear on the right, thus achieving loop playback.
I didn’t have time to debug the style of the picture and the button. You can change the css according to the effect you want
The specific code is as follows:
~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![]()
The above is the detailed content of Plug-in encapsulation of js carousel chart. For more information, please follow other related articles on the PHP Chinese website!