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

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

依赖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 onclick="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>
        <!--<li><a href="javascript:"><img src="../images/banner/banner4.jpg"/></a></li>-->
        <!--<li><a href="javascript:"><img src="../images/banner/banner5.jpg"/></a></li>-->
     </ul>
     <div class="banner-dot">
        <ul class="dot-box"></ul>
     </div>
 </div>
 <!--轮播  结束-->

调用的话只需要加一段

<script>
$(function(){
  slid();
})
</script>

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

直接给

slid.autoHeight();

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

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

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

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

猜你喜欢