使用jQuery实现旋转木马效果

r囧r小猫 2022-05-16 06:24 296阅读 0赞

/*该篇博文介绍一下旋转木马的做法,废话不多说,先来看看我们需要实现的效果*/

![这里写图片描述][70]

/*首先我们需要准备一个大盒子,包裹着一个ul和装有箭头的div,ul里准备5个li标签分别装着展示的图片
    从图中看的效果,只显示三张图片,一张主图片,还有两张分别是上一页还有下一页的图片,
    那么,从这里我们很容易能知道,图中所有的图片的样式都是固定的,那么我们可以用一个数组,数组里用对象存储这5张图片的css
    属性,大概就是这样的属性:隐藏-小图-大图-小图-隐藏,我们现在index为2的第三张图片为大图属性,
    这里以下一页为例子吧,点击下一页,只需要将数组里的最后一个对象属性删除,
    再将刚删除的对应属性,添加回原来数组的最前面.那么此时,数组里第四个对象,就是大图属性的css属性,
    换句话说,就是我们将数组里的对象属性换了位置,他记录着下一页每个图片的css属性,
    那么我们只需要再次调用我们jQuery的animate属性就可以轻松完成需要实现的效果.*/
    
    /*分析完思路,我们现在来确认需求,一步一步实现
    
    需求1:我们刚进入网页的时候,图片会自己走到自己对应的位置
    *这个简单,因为我们css样式已经记录了每个图片的位置,所以,我们只需要在交互之前调用一次animate方法即可
    
    需求2:移入大盒子,显示上一页下一页箭头,移出消失
    *这个简单,加移入移出事件即可,这里可以说下用jQuery的hover方法也不错
    
    需求3:右箭头下一页,左箭头上一页
    *还是以下一页为例吧,当我们点击下一页时,我们可以用数组的pop方法把最后一个元素删掉,把他得到的返回值,也就是刚删掉的元素
    用unshift方法把他加到数组的第一个元素即可
    *那么此时还有个问题,就是如果我们频繁的点击上一页下一页,那么效果可能不是很好,那么我们可以用一个变量记录一个布尔值
    *当变量为true时,表示可以执行我们的动画效果,点击上一页或下一页时,将该变量变为false,阻止用户的多次点击,当动画
    *播放结束时,利用animate的回调函数可以将布尔值赋值为true.
    
    下面放出我们的代码,希望这篇博文能帮到你O(∩_∩)O...*/

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8" />
      <title>旋转轮播图效果</title>
      <meta name="description" content="" />
      <meta name="keywords" content="" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <link rel="stylesheet" href="css/demo.css"/>
      <script src="js/jquery-1.12.2.js"></script>
      <script src="js/demo.js"></script>
    </head>
    <body>
    <div class="wrap">
      <div class="slide" id="slide">
        <ul>
          <li><img src="img/slidepic1.jpg" alt="" /></li>
          <li><img src="img/slidepic2.jpg" alt="" /></li>
          <li><img src="img/slidepic3.jpg" alt="" /></li>
          <li><img src="img/slidepic4.jpg" alt="" /></li>
          <li><img src="img/slidepic5.jpg" alt="" /></li>
        </ul>
        <div class="arrow">
          <a href="javascript:;" class="prev"></a>
          <a href="javascript:;" class="next"></a>
        </div>
      </div>
    </div>
    </body>
    </html>

@charset "UTF-8";
    /** * * @authors zengjiahao * @date 2018-02-26 * @version 1.0 */
    /*初始化 reset*/
    blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0 }
    
    body, button, input, select, textarea { font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif; color: #666; }
    
    ol, ul { list-style: none }
    
    a { text-decoration: none }
    
    fieldset, img { border: 0; vertical-align: top; }
    
    a, input, button, select, textarea { outline: none; }
    
    a, button { cursor: pointer; }
    
    .wrap { width: 1200px; margin-left: auto; margin-right: auto; border: 1px solid red; }
    
    .slide { position: relative; height: 500px; }
    
    .slide ul { position: absolute; left: 0; top: 0; z-index: 1; }
    
    .slide li { position: absolute; width: 800px; height: 500px; left: 200px; top: 0; background-color: #6475ae; }
    
    .slide img { width: 100%; height: 100%; }
    
    .arrow { position: absolute; z-index: 10; width: 100%; height: 100%; display: none; }
    
    .arrow a { position: absolute; left: 100px; top: 50%; width: 76px; height: 112px; margin-top: -56px; background: url(../img/prev.png) 0 0 no-repeat; }
    
    .arrow .next { right: 100px; left: auto; background-image: url(../img/next.png); }

/** * Created by zengjiahao on 2018/2/6. */
    $(function(){ 
        var pos = [
            {
                width:564,
                height:330,
                left:34,
                top:0,
                opacity:0,
                z:2
            },
            {
                width:564,
                height:330,
                left:34,
                top:79,
                opacity:0.8,
                z:3
            },
            {
                width:800,
                height:500,
                left:200,
                top:0,
                opacity:1,
                z:4
            },
            {
                width:564,
                height:330,
                left:605,
                top:79,
                opacity:0.8,
                z:3
            },
            {
                width:564,
                height:330,
                left:605,
                top:0,
                opacity:0,
                z:2
            }
        ];
        // 1. 获得要操作的对象
        var lis = $(".slide ul li");
        var arrow = $(".arrow");
        var flag  = true;
    
        // 2. 让每个li标签走到指定的位置
        assign();
        function assign(){ 
            $.each(pos,function (index,ele){ 
                // index是索引号 ele是数组中的对象
                lis.eq(index).css("zIndex",ele.z).stop().animate(ele,500,function (){ 
                       flag = true;
                });
            });
        }
    
        // 3. 鼠标移入大盒子的时候，要显示左右按钮 ,离开大盒子，要隐藏左右按钮
        $(".wrap").hover(function (){ 
               arrow.fadeIn();
        },function (){ 
               arrow.fadeOut();
        })
        // 4. 给右侧按钮注册事件
        $(".next").on("click",function (){ 
            if(flag){
                flag = false;
                pos.unshift(pos.pop());
                assign();
            }
    
        })
        // 5. 给左侧按钮注册事件
        $(".prev").on("click",function (){ 
            if(flag){
                flag = false;
                pos.push(pos.shift());
                // 数组现在是重新排列的了，再让li标签根据新的数组，重新生成自己的样式
                assign();
            }
    
        })
    })

[70]: /images/20220516/8ea7498600024a03a949ad31b452ad9c.png