Plug-in encapsulation of js carousel chart-JS Tutorial-php.cn

Plug-in encapsulation of js carousel chart

巴扎黑

Release： 2017-07-18 17:07:11

Original

1371 people have browsed it

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<len;i++){var curData = this.jsonData[i];
                    str+=&#39;<div><img src="" alt="" trueImg="&#39;+curData[&#39;img&#39;]+&#39;"></div>';
                    i===0?str2+="<li class=&#39;bg&#39;></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)

Copy after login

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!