使用jQuery实现旋转木马效果

最新推荐文章于 2024-07-13 15:30:00 发布

Mrlonely思考笔记

最新推荐文章于 2024-07-13 15:30:00 发布

阅读量2.6k

点赞数 1

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

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

版权

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

这里写图片描述

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