jQuery碎片图片轮播切换特效代码下载


jQuery碎片图片轮播切换特效代码下载
jQuery碎片图片轮播切换特效代码下载以及碎片图片、轮播切换等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/jquery-3.3.1.js"></script>

2. HTML代码

<div id="banner">
    <div id="pic">
        <ul>
            <li class="active"><a href="#"><img src="images/b1.jpg"></a></li>
            <li><a href="#"><img src="images/b2.jpg"></a></li>
            <li><a href="#"><img src="images/b3.jpg"></a></li>
            <li><a href="#"><img src="images/b4.jpg"></a></li>
            <li><a href="#"><img src="images/b5.jpg"></a></li>
        </ul>
    </div>
    <div id="tab">
        <ul>
            <li class="on"></li><li></li><li></li><li></li><li></li>
        </ul>
    </div>
    <div id="btn">
        <div id="leftBtn">&lt;</div>
        <div id="rightBtn">&gt;</div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //初始化
        var $maoni = $("<div class='maoni'></div>").appendTo("#banner");
        var arr = [];
        var lock=true;
        var num = 0;
        var $lis = $("#pic ul li");
        for (var i = 0; i < 10; i++) {
            for (var j = 0; j < 10; j++) {
                arr.push($("<div></div>").css({
                    width: 0,
                    height: 0,
                    "background": "url(images/b1.jpg) no-repeat " + j * -54 + "px " + i * -28 + "px",
                    "position": "absolute",
                    "top": i * 28 + "px",
                    "left": j * 54 + "px"
                }).appendTo($maoni));
            }
        }
        var timer=null;
        //做按钮
        $("#btn #leftBtn").click(function () {
            if(!lock) return;
            lock=false;
            num--;
            if (num < 0) {
                num = 4;
            }
            $("#tab li").eq(num).addClass("on").siblings().removeClass();
            for (var i = 0; i < arr.length; i++) {
                arr[i].css({"background-image": "url(images/b" + (num + 1) + ".jpg)"});
                arr[i].delay(Math.random() * 100).animate({
                    width: 54,
                    height: 28,
                }, 800 + Math.random() * 1000)
            }
            //保证回调函数只有一次
            setTimeout(function () {
                //更换图片
                //排他模型
                $lis.each(function () {
                    $(this).removeClass("active");
                })
                $lis.eq(num).addClass("active");
                //让所有的猫腻碎片 归位
                for (var i = 0; i < arr.length; i++) {
                    arr[i].css({width: 0, height: 0})
                }
                lock=true;
            }, 2000)
        })
        //有按钮
        $("#btn #rightBtn").click(function () {
            if(!lock) return;
            lock=false;
            $("#tab li").eq(num).addClass("on").siblings().removeClass();
            move();
        })
        //自动轮播
        timer=setInterval(move,3000);
        function move() {
                num++;
                if (num >4) {
                    num = 0;
                }
                $("#tab li").eq(num).addClass("on").siblings().removeClass();
                for (var i = 0; i < arr.length; i++) {
                    arr[i].css({"background-image": "url(images/b" + (num + 1) + ".jpg)"});
                    arr[i].delay(Math.random() * 100).animate({
                        width: 54,
                        height: 28,
                    }, 800 + Math.random() * 1000)
                }
                //保证回调函数只有一次
                setTimeout(function () {
                    //更换图片
                    //排他模型
                    $lis.each(function () {
                        $(this).removeClass("active");
                    })
                    $lis.eq(num).addClass("active");
                    //让所有的猫腻碎片 归位
                    for (var i = 0; i < arr.length; i++) {
                        arr[i].css({width: 0, height: 0})
                    }
                    lock=true;
                }, 2000)
            }
        //手动
        $("#tab li").mouseover(function () {
            $(this).addClass("on").siblings().removeClass("on");
           move();
        })
        $("#banner").hover(function () {
            clearInterval(timer);
        },function () {
            timer=setInterval(move,3000);
        })
    })
</script>

相关推荐

发表评论

相关文章