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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 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天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python IDLE入门简介
2017/12/08 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
规范化管理年活动总结
2014/08/29 职场文书
学生个人评语大全
2015/01/04 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang