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

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

依赖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>
        <!--<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();

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值