素材网 素材网

jQuery r图片旋转切换代码

下载资源()次

阅读次数()次

发布时间:2017-09-01

jQuery r图片旋转切换代码
分享到:

用法简介:

来源:xw素材网


jQuery r图片旋转切换代码。
文件引用:

<script>

    $(function () {

        /*图片位置数据*/

        var datas = [

            {'z-index': 6, opacity: 1, width: 760, height: 330, top: 40, left: 0},

            {'z-index': 4, opacity: 0.6, width: 560, height: 243, top:80, left: -225},

            {'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: -170},

            {'z-index': 2, opacity: 0.2, width: 620, height: 269, top: -60, left: 110},

            {'z-index': 3, opacity: 0.4, width: 480, height: 203,  top: -10, left: 430},

            {'z-index': 4, opacity: 0.6, width: 560, height: 243, top: 80, left: 420},

        ]

        move();


        function move() {

            /*图片分布*/

            for (var i = 0; i < datas.length; i++) {

                var data = datas[i];

                $('#slide ul li').eq(i).css('z-index',data['z-index']);

                $('#slide ul li').eq(i).stop().animate(data, 1200);

            }

        }


        /*左箭头事件*/

        $('.prev').on('click', function () {

            var last = datas.pop();

            datas.unshift(last);


            move();

        })


        /*右箭头事件处理函数*/

        function nextYewu(){

            var first = datas.shift();

            datas.push(first);

            move();

        }

        /*右箭头事件*/

        $('.next').on('click', nextYewu);


        /*自动播放*/

        var timer = setInterval(function(){

            nextYewu();

        },5000);

        /*鼠标进入slide显示箭头,清除自动播放*/

        $('#slide').on({

            mouseenter: function () {

                $('.arrow').css('display', 'block');

                clearInterval(timer);

            }, mouseleave: function () {

                $('.arrow').css('display', 'none');

                /*鼠标离开时自动播放*/

                clearInterval(timer);

                timer = setInterval(function(){

                    nextYewu();

                },5000)

            }

        })

    })

</script>


   

相关标签:

上一篇:HTML5焦点图片切换动画特效 下一篇:已经是最后一篇数据

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。