通過更改元素透明度實現輪播圖效果。

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

傳一個寬高比例進去就可以了；會先獲取到元素的寬度在進行高度的計算。

到目前為止，外掛還不是很完善 ，有機會還是得完善一下。

不過可以根據自己的專案實際需求去更改。