使用jQuery实现旋转木马效果

最新推荐文章于 2024-04-18 06:10:41 发布

Mrlonely思考笔记

最新推荐文章于 2024-04-18 06:10:41 发布

阅读量2.5k

点赞数 1

分类专栏：网站效果案例文章标签： js 旋转木马

本文链接：https://blog.csdn.net/zjhzjh893/article/details/81749326

版权

网站效果案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

这里写图片描述

/*首先我们需要准备一个大盒子,包裹着一个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();
        }

    })
})

Mrlonely思考笔记

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery实现旋转木马效果

/*该篇博文介绍一下旋转木马的做法,废话不多说,先来看看我们需要实现的效果*/![旋转木马效果](https://img-blog.csdn.net/20180816205844357?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqaHpqaDg5Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA=...
复制链接

扫一扫