jQuery实现轮播图（二）

最新推荐文章于 2023-12-20 17:27:12 发布

梵海pp

最新推荐文章于 2023-12-20 17:27:12 发布

阅读量506

点赞数 1

分类专栏： jquery 文章标签： jquery 轮播图 animate 特效碎块

本文链接：https://blog.csdn.net/m0_37460263/article/details/76099891

版权

jquery 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

这里的轮播为轮播增添了一个效果，前一张图片整体碎成小块块然后上移消失，而下一张图片显示出
这里写图片描述

原理为：事先创建一堆浮动的div（宽高一样，布满整个背景box，这里的box包含着图片）然后为每一个div添加背景图片，使用background-position可以为每一个div取出同一张图片的对应位置的图样作为背景，然后就可以分别控制各div的运动来达到效果

这里也改变了一下轮播点击按钮的运动样式
这里写图片描述

点击圆扭时有一个小球会运动到当前按钮上，具有了动态感。实现创建一个div设置为运动的白球，绝对定位，点击按钮时候给予对应的运动便可

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script>
        $(function (){
            var num=1;
            //创建DOM元素
            creatBlock(1);

            function creatBlock(num){//创建一堆div,设置样式
                for(var i=0;i<72;i++)
                {
                    var oblock=$("<div></div>");
                    oblock.css({
                        "width":"100px",
                        "height":"100px",
                        "position":"absolute",
                        "left":i%12*100+"px",
                        //通过简单的算法设置位置和取对应位置的图片
                        "top":Math.floor(i/12)*100+"px",
                        "backgroundImage":"url(./images/"+num+".jpg)",
                        "backgroundPosition":-i%12*100+"px "+(-Math.floor(i/12)*100)+"px",
                        "backgroundSize":"1200px 600px",
                    });
                    oblock.addClass("smallblock");
                    $(".block").append(oblock);//添加到box背景中
                }
            }

            function animatelinearleft()
            {
                num++;//使用全局num控制图片背景的变换
                //*
                $(".block").css({"backgroundImage":"url(./images/"+num+".jpg)"});
                $(".smallblock").each(function (index) {//遍历每个div添加事件
                    //随机给各div不同的运动距离
                 $(".smallblock").eq(index).stop().animate({"top":-(Math.random()*(72-index))*100+"px","opacity":"0"},500,function(){
                        $(this).css({
                        //设置回调函数改变各div的背景图（用num控制图片，由于上一个图片的各div运动完才能为div的背景改变为新图片的，所以中间会有一个空白期，因此我们在“*”处编写代码让block大背景先变为下一张图，过程是个动态的但是用户看不出来）
                            "left":index%12*100+"px",//初始化每个div的位置
                            "top":Math.floor(index/12)*100+"px",
                            "opacity":1,
                            "backgroundImage":"url(./images/"+num+".jpg)"})//改变背景
                    });
                });
            }


            $(".div_list").each(function (index) {//控制圆点按钮的运动
                $(this).click(function () {
                    num=index;
                    $(".black_nav").stop().animate({"top":202+(index*46)+"px"},500);
                    animatelinearleft();
                    console.log(this.offsetTop)
                });
            })


        });
    </script>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .block
        {
            position: relative;
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            margin-top: 100px;
            overflow: hidden;
            background-size: 1200px 600px;
        }
        .nav{
            position: absolute;
            z-index: 9999;
            top: 50%;
            left: 20px;
            margin-top: -120px;
        }
        .div_list{
            width: 20px;
            height: 20px;
            border: 3px solid white;
            border-radius: 50%;
            margin-top: 20px;
            cursor: pointer;
        }
        .black_nav{
            width: 22px;
            height: 22px;
            border-radius:50%;
            background: white;
            cursor: pointer;
            left: 22px;
            top:202px ;
            z-index: 10000;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="nav">
        <div class="div_list"></div>
        <div class="div_list"></div>
        <div class="div_list"></div>
        <div class="div_list"></div>
    </div>
    <div class="black_nav"></div>
</div>
</body>
</html>

梵海pp

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现轮播图（二）

这里的轮播为轮播增添了一个效果，前一张图片整体碎成小块块然后上移消失，而下一张图片显示出原理为：事先创建一堆浮动的div（宽高一样，布满整个背景box，这里的box包含着图片）然后为每一个div添加背景图片，使用background-position可以为每一个div取出同一张图片的对应位置的图样作为背景，然后就可以分别控制各div的运动来达到效果这里也改变了一下轮播点击按钮的运动样式点击圆
复制链接

扫一扫