jquery z-index 滚动

$(function(){
    //将图片转变成背景
        $(".flash").append("<div class='fbg'><ul class='small'></ul></div>");
        $(".ul_flash li").each(function(){
            $(".small").append("<li><img src='"+$(this).find("img").attr("small")+"'/></li>");
            $(this).css({"backgroundImage":"url("+$(this).find("img").attr("src")+")"}).find("img").remove();
        })
    //定位数字
        $(".small").css("left",(document.documentElement.clientWidth - $(".small").innerWidth(true)) / 2).find("li:eq(0)").addClass("on");
        $(window).resize(function(){$(".small").css("left",(document.documentElement.clientWidth - $(".small").innerWidth(true)) / 2).find("li:eq(0)").addClass("on");})
        window.onload = function()
        {
            var play_num =0;
            //设置轮播间隔时间
            var auto_time = 4000;
            //获取图片数量
            var auto_num = $(".ul_flash li").length;
            //获取图片高度
            var zIndex = 1;
            //轮播动画
            function play(play_num)
            {
                $(".ul_flash li").eq(play_num).css("zIndex",zIndex).animate({opacity:1},1000,function(){
                    $(".ul_flash li:not(:eq("+play_num+"))").css("opacity",0);
                });
                $(".small li").removeClass("on").eq(play_num).addClass("on");
                zIndex ++;
            }
            play(play_num);
            play_num++;
            if (play_num == auto_num)
            {
            play_num = 0;   
            }
            auto_play = setInterval (function(){
                play(play_num)
                play_num++;
                if (play_num == auto_num)
                {
                play_num = 0;   
                }
            },auto_time)
            //鼠标事件
            $(".small li").click(function(){
                $(".ul_flash").stop();
                auto_stop();
                play($(this).index());
                if($(this).index()==auto_num-1)
                {
                    play_num=0;
                }
                else
                {
                play_num = $(this).index()+1;
                }
                auto_replay();
            });
            //停止播放
            function auto_stop()
            {
                clearInterval(auto_play);   
            }
            //重新播放
            function auto_replay()
            {
                auto_play = setInterval (function(){
                    play(play_num)
                    play_num++;
                    if (play_num == auto_num)
                    {
                    play_num = 0;   
                    }
                },auto_time)
            }
        }
})
    原文作者:GongChao
    原文地址: https://segmentfault.com/a/1190000000441672
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞