我之前寫過一個常見的輪播圖效果,詳情見:http://www.jianshu.com/p/44ab9edd8c57
本文內容實現的是無縫循環輪播圖效果,也比較常見,天貓、京東、麥包包中也經常會有。圖片自動滑動,且點擊下面文字(指示器)進行圖片的切換。
如果想讓動畫效果更有趣,可引入jquery.easing包,裏面有很多貝塞爾曲線特效,結合animate里使用,效果會更加炫酷!

實現效果:


image.png

image.png

實現原理:


image.png

實現難點:
1、解決點擊事件與輪播動畫的問題(注:點擊時候不輪播,輪播動畫時不可點擊)
2、解決指示器显示異常問題
3、解決動畫疊加問題

代碼(文中5張圖片大小均為:952×440,最後第6張與第一張相同):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #bor{
            width: 952px;
            height: 440px;
            border: 2px black solid;
            margin: 200px auto;
            overflow: hidden;
            position: relative;
        }    
        #bor #pic_bor{
            width: 5712px;
            height: 440px;
            position: absolute
        }
        #bor #pic_bor img{
            float: left;
        }
        #bor ul{
            width: 585px;
            height: 30px;
            bottom: 0px;
            right: 0px;
            position: absolute
        }
        #bor ul li{
            width: 116px;
            height: 30px;
            color: white;
            list-style: none;
            font-family: '宋體';
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            margin-left: 1px;
            background: black;
            float: left;
            opacity: 0.4;
        }
        #bor ul li:hover{
            color: #c00;
            text-decoration: underline;
        }
        </style>

    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var i = 0;//用於做標記
            var inTimer;//將定時器設置成成員變量
            var outTimer;
            var isCli = true;
            //圖片輪播函數
            function run(){
                i++;
                if(i==6){//如果最後一張,left屬性改變成0
                    $("#bor #pic_bor").css({'left':0+'px'});
                    i=1;
                }
                    var left = i*-952;
                    isCli = false;//輪播動畫切換時不可點擊
                    $("#bor #pic_bor").animate({'left':left+'px'},300,function(){
                            isCli = true;
                        });
                    if(i==5){//指示器显示問題解決
                        $("#bor ul li").eq(0).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
                    }else{
                        $("#bor ul li").eq(i).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
                    }
            }
            inTimer = setInterval(run,2000);
//            li的點擊的時候不讓有輪播動畫
            $("#bor ul li").click(function(){
                if(!isCli){//動畫不能點擊
                    return;
                }
                //清理定時器
                clearTimeout(outTimer);
                //清理定時器
                clearInterval(inTimer);
                //點擊的時候不開啟定inTimer
                outTimer = setTimeout(function(){
                    inTimer = setInterval(run,2000);
                },400);
                // 標記
                var liThis = $(this);
                i = liThis.index();
                var picl = i*-952; 
                //指示器
                $("#bor ul li").eq(i).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
                //輪播
                $("#bor #pic_bor").stop().animate({'left':picl+'px'},300);
            })

        })
    </script>
    </head>
    <body>
        <div id="bor">
            <div id="pic_bor">
                ![](mbb_images/img1.jpg)
                ![](mbb_images/img2.jpg)
                ![](mbb_images/img3.jpg)
                ![](mbb_images/img4.jpg)
                ![](mbb_images/img5.jpg)
                ![](mbb_images/img1.jpg)
            </div>
            <ul>
                    <li style="opacity: 0.7;">起舞少女</li>
                    <li>小小心機</li>
                    <li>海島假日</li>
                    <li>星空幻想</li>
                    <li>馬戲遊園</li>
            </ul>
        </div>
    </body>
</html>

如有問題歡迎交流。

如轉載請註明出處,謝謝!