FIG widget package rotation jQuery

// layout requirements, there must be a container, pictures and two buttons, a custom layout, fixed dot pattern 
// <div class = "All"> 
//          <IMG the src = "IMG / bg1.jpg"> 
//          <IMG the src = "IMG / bg2.jpg"> 
//          <IMG the src = "IMG / bg3.jpg"> 
//          <IMG the src = "IMG / bg4.jpg"> 
//          <IMG the src = "IMG /bg5.jpg "> 
//          <the INPUT of the type =" the Button "name =" "value =" << "/> 
//          <the INPUT of the type =" the Button "name =" "value =" >> "/> 
//      </ div> 

// parameter method 
    // $ (. "All").Banner ({ 
    //          imgs:. $ ( '. All') the Find ( 'img'), // Required, carousel picture 
    //         prev: $ ( 'all.' ) find ( 'input') eq (0), // Required back button.. 
    //          Next:. $ ( '. All') Find ( 'INPUT'). eq (1), // Required Next button 
    //          Points: true, // optional, dots, default to true 
    //          autoplay: true, // optional, defaults to true, automatically rotate 
    / /          Delay: 300, // optional, defaults to 3000 
    //          Current: 3, // optional, default is the first picture shows 0 
    //          DURATION: 300 // optional, default is 300 - long animation 
    //      }); 
    
    
; ( function ($) {
     "use strict" ; 
    class {Banner 
        constructor (ELE, obj) { 
            // receiving element and a parameter object 
            var {imgs, PREV, Next, Points, AutoPlay, Delay, Current, duration} =obj;
            // 处理数据
            this.index=(current||1)-1;
            this.img=imgs;
            this.prev=prev;
            this.next=next;
            this.points= points===false?false:true;
            this.autoplay= autoplay===false?false:true;
            
            // 控制动画时长
            if(this.autoplay){
                this.delay=delay||1000;
            }the else {
                 the this .delay = 1000000000 ; 
            } 
            the this .duration DURATION || = 500 ;
             // generating chamber of small buttons required in the case where user 
            IF ( the this .points) { 
                ele.append ($ ( "<UL class = 'UL-Banner'> " )); 
            } 
            
            // style, thus reducing the use of some of housekeeping 
                ele.css ({ 
                    overflow: " hidden " 
                }) 
                the this .img.css ({ 
                    position: " Absolute " , 
                    Top: 0 ,
                    left:"100%" 
                }) 
                the this .img.eq ( the this .index) .css ( "left", 0 );
                 the this .next.css ( "Z-index", 34 is );
                 the this .prev.css ( "Z- index ", 34 is ); 
                

            the this .UL = ele.children (" UL-ul.banner " );
             the this .ele = ELE; 
            
            the this .init ();
             // determines whether to automatically rotate according to the needs of the user 
            iF ( the this .autoplay )
                 the this .time (); 
        } 
        // automatic carousel function 
        Time () { 
            the clearInterval (the this .TT);
             the this .TT the setInterval = (() => {
                 the this .kg = to true ;
                 the this .init2 (); 
            }, the this .delay) 
        } 
        the init () { 
            var that = the this ;
             // front one after a two button to add the event 
            the this .prev.on ( "the Click", function () { 
                that.kg = to false ; 
                that.init2 (); 
            }); 
            the this .next.on ( "the Click", function () { 
                that.kg = to true ;
                that.init2 (); 
            }); 
            // generated dots of dot if desired 
            IF ( the this .points) {
                 for ( var I = 0; I < the this .img.length; I ++ ) {
                     the this .UL .append ($ ( "<Li>" )); 
                } 
                the this .li = the this .ul.children ( "Li" ); 
            
                // add style 
                the this .ul.css ({ 
                    position: "Absolute" , 
                    left: "43 is % " , 
                    Run the display: " Flex " ,
                    width: "14%",
                    "justify-content": "space-around",
                    bottom: "10px",
                    padding: 0,
                })
                this.li.css({
                    display: "block",
                    width: "40px",
                    height: "3px",
                    "z-index":30
                }) 
                // 给当前和其他添加样式
                this.li.eq(this.index).css("background","red");
                the this.li.eq ( the this . .index) .siblings () CSS ( "background", "# 0FF" );
                 the this .init1 (); 
            } 
        } 
        INIT1 () { 
            var that = the this ;
             // for each small circle point into the event, the picture switching the mouse into 
            the this .ul.on ( "the Click", "Li", function () {
                 IF (that.index <$ ( the this ) .index ()) { 
                    that.qian = that.index ; 
                    that.kg = to true ; 
                } the else  IF (that.index == $ ( the this).index()){
                    return 0;
                }else{
                    that.hou=that.index;
                    that.kg=false;
                }
                that.index=$(this).index();
                that.move();
            });    
        }
        init2(){
            // 计算索引
            if(this.kg)
                if(this.index==this.img.length-1)
                    {this.index=0;
                    this.qian=this.img.length-1;}
                else
                    {this.index++;
                    this.qian=this.index-1}
            else
                if(this.index==0)
                    {this.index=this.img.length-1;
                    this.hou=0;}
                else
                    {this.index--;
                    the this .hou = the this .index. 1 + }
                 the this .move (); 
        } 
        Move () { 
            the clearInterval ( the this .TT);
             IF ( the this .points) {
                 // Cleanup other special dot pattern 
                for ( var J = 0 ; J < the this .li.length; J ++ )
                     the this .li.eq (J) .css ( "background", "# 00FFFF" );
                     // to the current small dots add a special style 
                the this .li.eq ( the this . index) .css ( "background", "Red" ); 
            } 
            var w=parseInt(this.img.eq(1).width());
            // 动画,轮播图的图片的具体效果
            if(this.kg){
                this.img.eq(this.qian).css("left",0).stop().animate({left:-1*w},this.duration);
                this.img.eq(this.index).css("left",w+"px").stop().animate({left:0},this.duration);
            }else{
                this.img.eq(this.hou).css("left",0).stop().animate({left:w},this.duration);
                this.img.eq(this.index) .css ( "left", -. 1 * W + "PX") STOP () Animate ({left: 0},.. the this .duration); 
            } 
            // end when the timer is cleared in one rebinding 
            IF ( the this .autoplay) 
                the clearInterval ( the this .TT);
                 the this .TT the setInterval = (() => {
                     the this .kg = to true ;
                     the this .init2 (); 
                }, the this .delay) 
        } 
    } 
    // bind banner method 
    .fn.extend $ ({ 
        Banner (obj) { 
            new new Banner ( the this  , obj);
        }
    });
})(jQuery);