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中的类继承
Nov 25 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
原生JS实现九宫格抽奖
Sep 13 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
图书管理程序(三)
2006/10/09 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
深入分析PHP设计模式
2020/06/15 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
js实现继承的5种方式
2015/12/01 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
python逐行读取文件内容的三种方法
2014/01/20 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
pycharm 安装JPype的教程
2019/08/08 Python
python基础 range的用法解析
2019/08/23 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
大二法英学生职业生涯规划范文
2014/02/27 职场文书
黄金酒广告词
2014/03/21 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
体育教师个人总结
2015/02/09 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书