JQ例子：旋轉木馬

時間 2019-11-12

原文原文鏈接

使用JQ現實旋轉木馬超級簡單，它看起來很複雜，動畫好像很難實現，但其實否則。javascript

效果圖：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋轉木馬</title>
    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .wrap{
            width: 1200px;
            margin: 0 auto;
        }    
        .slide{
            width: 1200px;
            height: 500px;
            /*background: pink;*/
            position: relative;
        }
        .slide ul li{
            position: absolute;
        }
        .slide ul li img{
            width: 100%;
            height: 100%;
        }
        .arrow a{
            position: absolute;
            text-align: center;
            line-height: 76px;
            top: 50%;
            height: 76px;
            width: 112px;
            margin-top: -56px;
            font-size: 40px;
            font-weight: bold;
            z-index: 100;
            background: rgba(0,0,0,0.5);
            color: #fff;
            display: none;
        }
        .arrow a.pre{
            left: 0;
        }
        .arrow a.next{
            right: 0;
        }

    </style>
</head>
<body>
    
    <div class="wrap">
        <div class="slide">
            <ul>
                <li><img src="1.jpg" alt=""></li>
                <li><img src="2.jpg" alt=""></li>
                <li><img src="3.jpg" alt=""></li>
                <li><img src="4.jpg" alt=""></li>
                <li><img src="5.jpg" alt=""></li>
            </ul>
            <div class="arrow">
                <a href="javascript:;" class="pre"><</a>
                <a href="javascript:;" class="next">></a>
            </div>
        </div>
    </div>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script>
    
    $(function(){
        /*避免屢次點擊出現bug，只能在點擊後動畫完後才能再點擊*/
        var status=true;
        var timer=null;
        /*核心,把會變化的值存起來，而後動態循環這些值，而後添加到對應索引值的li標籤裏*/
        var json=[{
            width:400,
            height:200,
            top:20,
            left:50,
            opacity:0.2,
            z:2
        },{
            width:600,
            height:300,
            top:70,
            left:0,
            opacity:0.8,
            z:3    
        },{
            width:800,
            height:400,
            top:0,
            left:200,
            opacity:1,
            z:4
        },{
            width:600,
            height:300,
            top:70,
            left:600,
            opacity:0.8,
            z:3
        },{
            width:400,
            height:200,
            top:20,
            left:800,
            opacity:0.2,
            z:2
        }];
         move();
         clearInterval(timer);
         timer=setInterval(function(){
             move(true);
         },2000);
         $(".slide").hover(function(){
             /*爲何添加stop()，爲了屢次觸發不斷觸發BUG，因此每次觸發前都
            *把以前的動畫中止掉
             */
             $(".arrow a").stop().fadeIn();
              clearInterval(timer);
         },function(){
             $(".arrow a").stop().fadeOut();
              timer=setInterval(function(){
                 move(true);
             },2000);
         })
        $(".arrow .pre").on("click",function(){
            if(status){
                status=false;
                move(true)
            }
        });
        $(".arrow .next").on("click",function(){
            if(status){
                status=false;
                move(false)
            }    
        });

        function move(offOn){
            /*一開始調用時沒有傳值，但會走動一下，因此要判斷沒傳值時，不走if語句裏的內容*/
            if(offOn!=undefined){
                if(offOn){
                    /*使用數組刪除會返回刪除值，而它是刪除最後一個，因此就是
                    *返回最後一個值
                    ，而後數組的前追加*/
                    json.unshift(json.pop());
                }else{
                    /*這個一樣原理，只是它是數組的後追加，把數組的第一個追加到最後*/
                    json.push(json.shift());
                }
            }
            $.each(json,function(i,v){
                /*歷遍json，添加到對應索引的li標籤，使用animate實現動畫效果*/
                $(".slide ul li").eq(i).css("z-index",v.z).stop().animate({"width":v.width,"opacity":v.opacity,"left":v.left,"top":v.top,"height":v.height},500,function(){
                    /*這裏就是動畫完後執行的回調函數*/
                        status=true;
                });
            })
        }
    })
        

        
    </script>
</body>
</html>

這裏json是核心，只要變化json裏數組的排序，就能夠改變固定的圖片的寬、高、透明度、層級、位置，而後使用animate這個動畫方法實現到動畫的效果。html

最近收集的輪播圖插件：傳送門java

圖片滑動插件：superSilde-傳送門jquery

這是一款圖片滑動很齊全的插件，並且學習起來很簡單，源碼算是不難的那種，沒有使用很難讓人看的懂的模式。json

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。