JQ例子:旋转木马

*爱你&永不变心* 提交于 2020-04-03 23:41:03

使用JQ现实旋转木马超级简单,它看起来很复杂,动画好像很难实现,但其实不然。

效果图:

 

<!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这个动画方法实现到动画的效果。

 

最近收集的轮播图插件:传送门

图片滑动插件:superSilde-传送门

这是一款图片滑动很齐全的插件,而且学习起来很简单,源码算是不难的那种,没有使用很难让人看的懂的模式。

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!