jQuery实现轮播图（二）

来源：互联网发布：大数据机房建设编辑：程序博客网时间：2024/06/11 19:30

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

原理为：事先创建一堆浮动的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>

阅读全文

0 0