JS实现旋转木马轮播图


Posted in Javascript onJanuary 01, 2020

本文实例为大家分享了JS实现旋转木马轮播图的具体代码,供大家参考,具体内容如下

知识点

1、旋转木马思想:

1)、固定五种图片的位置信息jsonArr进行布局
2)、点击<或者>会对jsonArr进行重新排序,重新排序后对界面重新进行布局

2、数据驱动界面,数据的改变会影响界面

3、数组的四种操作

① push:push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
② pop:pop() 方法用于删除并返回数组的最后一个元素。
③ shift:shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
④ unshift:unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

引入工具库工具库

运行效果

JS实现旋转木马轮播图

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  * {
   margin: 0;
   padding: 0;
   border: none;
   list-style: none;
  }

  img {
   vertical-align: top;
  }

  body {
   background-color: #000;
  }

  #slider {
   width: 1200px;
   height: 460px;
   margin: 100px auto;
   position: relative;
   /*background-color: red;*/
  }

  #slider li {
   position: absolute;
   left: 200px;
   top: 0;
  }

  #slider li img {
   width: 100%;
   height: 100%;
  }

  .slider_ctl_prev, .slider_ctl_next {
   width: 76px;
   height: 112px;
   position: absolute;
   top: 50%;
   margin-top: -56px;
   z-index: 99;
  }

  #slider_ctl {
   opacity: 0;
  }

  .slider_ctl_prev {
   background: url("images/prev.png") no-repeat;
   left: 0;
  }

  .slider_ctl_next {
   background: url("images/next.png") no-repeat;
   right: 0;
  }
 </style>
</head>
<body>
<div id="slider">
 <ul id="slider_main">
  <li><img src="images/slidepic1.jpg" alt=""></li>
  <li><img src="images/slidepic2.jpg" alt=""></li>
  <li><img src="images/slidepic3.jpg" alt=""></li>
  <li><img src="images/slidepic4.jpg" alt=""></li>
  <li><img src="images/slidepic5.jpg" alt=""></li>
 </ul>
 <div id="slider_ctl">
  <span class="slider_ctl_prev"></span>
  <span class="slider_ctl_next"></span>
 </div>
</div>
<script src="../00MyTools/MyTools.js"></script>
<script>
 window.addEventListener('load',function (ev) {
  // 1. 获取需要标签
  var slider = myTool.$('slider');
  var sliderMain = myTool.$('slider_main');
  var allLis = sliderMain.children;
  var sliderCtl = myTool.$('slider_ctl');

  // 2. 位置信息
  var jsonArr = [
   {"width":"400", "top":"20", "left":"50", "opacity":"0.2", "zIndex":"2"},
   {"width":"600", "top":"70", "left":"0", "opacity":"0.8", "zIndex":"3"},
   {"width":"800", "top":"100", "left":"200", "opacity":"1", "zIndex":"4"},
   {"width":"600", "top":"70", "left":"600", "opacity":"0.8", "zIndex":"3"},
   {"width":"400", "top":"20", "left":"750", "opacity":"0.2", "zIndex":"2"}
  ];
  // 将位置信息作用到图片上去
  for (var i = 0; i < jsonArr.length; i++) {
   myTool.slowMoving(allLis[i], jsonArr[i]);
  }
  // 3. 设置显示和隐藏
  slider.addEventListener('mouseover', function () {
   myTool.slowMoving(sliderCtl, {'opacity': 1});
  });

  slider.addEventListener('mouseout', function () {
   myTool.slowMoving(sliderCtl, {'opacity': 0});
  });

  // 4. 监听点击
  for (var j = 0; j < sliderCtl.children.length; j++) {
   var item = sliderCtl.children[j];
   item.addEventListener('click',function (evt) {
    if (this.className === 'slider_ctl_prev'){
     // 点击左边
     // 两种方式
     // 1. 改变数据影响标签 数据驱动界面
     // 2. 改变标签适应数据
     jsonArr.push(jsonArr.shift())
    }else{
     // 点击右边
     jsonArr.unshift(jsonArr.pop())
    }

    // 重新布局
    for (var i = 0; i < jsonArr.length; i++) {
     myTool.slowMoving(allLis[i], jsonArr[i]);
    }
   },false);
  }
 },false)
</script>
</body>
</html>

更多关于轮播图效果的专题,请点击下方链接查看学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 字符串乘法
Aug 20 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
JS实现普通轮播图特效
Jan 01 #Javascript
javascript实现超好看的3D烟花特效
Jan 01 #Javascript
JavaScript工具库MyTools详解
Jan 01 #Javascript
javascript Canvas动态粒子连线
Jan 01 #Javascript
小程序新版订阅消息模板消息
Dec 31 #Javascript
小程序实现长按保存图片的方法
Dec 31 #Javascript
使用webpack搭建vue环境的教程详解
Dec 31 #Javascript
You might like
PHP的面试题集
2006/11/19 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python编写一个优美的下载器
2018/04/15 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python类中super() 的使用解析
2019/12/19 Python
Python列表list操作相关知识小结
2020/01/29 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
Java异常体系非正常停止和分类
2022/06/14 Java/Android