通过更改透明度实现宽高自适应的轮播图

野性酷女 2022-05-26 00:40 27阅读 0赞

通过更改元素透明度实现轮播图效果。

依赖jQuery开发的一个小插件

/**
     * Created by Administrator on 2017/6/9.
     */
    
            var BulidSlid = function () {
                var ind = 0;
                var timer;
                var leng;
                //根据屏幕宽度调节轮播图高度
                this.autoHeight = function (w, h) {
                    var w = w || 3,
                        h = h || 1;
                    if( $(".banner").width() > 1100 ){
                        var hei = $(".banner").width() / w;  //根据 给出的长宽为 1500*500   长宽比为 3:1
                        $(".banner").css("height",hei*h);
                        $(".slid").css("height",hei*h);
                        $(".slid li img").css("height",hei*h);
                    }
                }
    
                //设置定时器  开始自动轮播
                this.autoSlid = function ( index ) {
                    ind = index || ind;
                    $(".slid").children().eq( ind ).fadeIn(500).siblings().fadeOut();
                    $(".dot-box li").removeClass("dot");
                    $(".dot-box").children().eq( ind ).addClass("dot");
                    if ( ind < leng -1 ){
                        ind++;
                    }else{
                        ind = 0;
                    }
                    timer = setTimeout(this.autoSlid.bind(this),4000);    //延时器
                }
    
                //小圆点的点击事件
                this.dot = function ( that ) {
                    ind = $( that ).index();
                    this.autoSlid( ind );//调用自动轮播方法
                    clearTimeout( timer );//先清除延时器
                }
    
                //初始化轮播图   构建小圆点
                this.init = function () {
                    leng = $(".slid li").length;
                    if( leng > 1 ){
                        for( var i = 0 ; i < leng ; i++ ){    //根据图片数量生成对应的小圆点
                            var str = '<li οnclick="slid.dot( this )"></li>';
                            $(".dot-box").append( str );
                        };
                        this.autoSlid( ind );  //调用自动轮播
                        $(".banner").hover(
                            function () {
                                if(timer) clearTimeout(timer);
                            },function () {
                                timer = setTimeout(this.autoSlid.bind(this),4000);
                            }.bind(this)
                        )
    
                    }
                    this.autoHeight();
                }
    
            }
    
            var slid = new BulidSlid();
    
    //监听窗口变化
    $(window).resize(function() {
       slid.autoHeight();  //调用自动调节高度方法  窗口变化  图片自己去适应
    });

<div class="banner">
        <ul class="slid">
            <li class="slid-show"><a href="javascript:"><img src="../images/banner/banner1.jpg"/></a></li>
            <li><a href="javascript:"><img src="../images/banner/banner2.gif"/></a></li>
            <li><a href="javascript:"><img src="../images/banner/banner3.jpg"/></a></li>
            
            
         </ul>
         <div class="banner-dot">
            <ul class="dot-box"></ul>
         </div>
     </div>

调用的话  只需要加一段

参数的话 就只有宽高比列可以调整了

直接给

slid.autoHeight();

传一个宽高比例进去就可以了；会先获取到元素的宽度在进行高度的计算。

到目前为止，插件还不是很完善 ，有机会还是得完善一下。

不过可以根据自己的项目实际需求去更改。