面向对象写轮播图

川长思鸟来 2022-05-24 00:54 212阅读 0赞

**运行效果图**

**![20180517132055955][]**

**html代码**

**css代码**

*{
    	margin: 0;
    	padding: 0;
    }
    li {
    	list-style: none;
    }
    a {
    	font-size:12px;
    	color: #333333;
    	text-decoration: none;
    }
    #banner{
    	width:1211px;
    	height: 400px;
    	position: relative;
    	overflow: hidden;
    	margin: 0 auto;
    	}
    #banner>ul>li{
    	float: left;
    	position: absolute;
    	opacity: 0;
    	}
    #banner>ul>li:nth-of-type(1){
    	opacity: 1;
    }
    #banner>ul>li>img{
    	width:1435px;
    	height: 400px;
    	cursor: pointer;
    	}
    #direction{
    	display: none;
    	position: relative;
    }
    #direction>a{
    	position: absolute;
    	width:40px;
    	height:40px;
    	font-size: 20px;
    	text-align: center;
    	line-height:40px;
    	color: #fff;
    	text-decoration: none;
    	background: #000;
    	top:160px;
    	opacity: 0.5;
    	border-radius:50px 60px;
    }
    #direction>a:hover{
    	opacity: 1;
    }	
    #direction>a:nth-child(2){
    	right: 0;
    	}
    	#direction>a:nth-child(1){
    	left: 40px;
    }
    #btn{
    	position: absolute;
    	left:50%;
    	bottom:0;
    	}
    #btn>a{
    	float: left;
    	width:25px;
    	height: 25px;
    	line-height: 25px;
    	text-align: center;
    	background: #444444;
    	color: #FFFFFF;
    	border-radius: 50%;
    	margin:5px;
    	}
    #btn>.active{
    	background:#669933;
    	}

**JS代码**

/*把属性写在构造函数里*/
    function Banner(ele){
        this.aLi = ele.find("li"); 
        this.next = 0;
        this.iNow = 0;
        this.dir1 = $("#direction>a").first();
        this.dir2 = $("#direction>a").last();
        this.banner = $("#banner");
        this.direction = $("#direction");
        this.timer = null; 
        this.aBtn = $("#btn>a");
        this.index = null;
        this.init();
    }
    
    /*对jquery对象扩展方法，把方法添加到原型对象上*/
    $.extend(Banner.prototype,{
        // 初始化
        init:function(){
            this.autoplay();
            this.indicator();
            this.dir1.on("click",$.proxy(this.dire,this));
            this.dir2.on("click",$.proxy(this.handleAuto,this));
            this.banner.on("mouseover",$.proxy(this.stopPlay,this));
            this.banner.on("mouseout",$.proxy(this.continuePlay,this));
        },
        //点击右边的按钮及自动播放
        handleAuto:function(){
            if(this.next>=this.aLi.length-1){
                this.next = 0;
            }else{
               this.next ++;
            }
            this.toImg();
        },
        //点击左边的按钮
        dire:function () {
            if (this.next == 0) {
                this.next =this.aLi.length - 1;
            } else {
                this.next--;
            }
            this.toImg();
        },
        // 指示器
        indicator:function(){
            this.aBtn.each($.proxy(this.handleIndicatorEach,this))
        },
        handleIndicatorEach:function(index,val){
            this.aBtn.eq(index).on("mouseover",index,$.proxy(this.dicator,this))
        },
        dicator:function(e){
            // 保存当前下标
            this.index = e.data;
            this.aBtn.eq(this.index).addClass("active").siblings().removeClass();
            //移入的时候让当前这个li显示
            this.aLi.eq(this.index).fadeTo(500,1).siblings().fadeTo(500,0);
            // 因为next与this.index不是同一个东西 因此需要他们两个同步
            this.next = this.index;
        },
        //移入的时候轮播停止
        stopPlay:function(){
             clearInterval(this.timer);
            this.direction.attr("style","display:block");
        },
        //移出的时候轮播继续
        continuePlay:function(){
            this.autoplay();
            this.direction.attr("style","display:none");
        }，
        //自动轮播
        autoplay:function(){
            this.timer = setInterval($.proxy(this.handleAuto,this),3000)
        },
        //运动原理
        toImg:function(){
            this.aLi.eq(this.iNow).fadeTo(500,0);
            this.aLi.eq(this.next).fadeTo(500,1);
            this.iNow = this.next;
            $(this.aBtn[this.next]).addClass("active").siblings().removeClass();
        }
    })
    new Banner($("#banner"));

[20180517132055955]: /images/20220524/97371245d68b45668d636accd3716942.png