jQuery Banner图片旋转切换特效

这是一款仿海风教育的师资力量页面的网站banner图片切换特效，jQuery图片旋转切换代码。

js代码

<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>

在线预览
资源均来自第三方，谨慎下载，前往第三方网站下载