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 相关文章推荐
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 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中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
了解javascript中的Dom操作
2019/05/27 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
详解Python迭代和迭代器
2016/03/28 Python
python协程之动态添加任务的方法
2019/02/19 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
Shell编程面试题
2016/05/29 面试题
电大自我鉴定
2013/10/27 职场文书
单位介绍信范文
2014/01/18 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android