编程 Javascript

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>

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

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

JS实现旋转木马轮播图

- Author -

KaiSarH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 瀑布流绝对定位布局（二）(延迟AJAX加载图片)

May 23 Javascript

jquery获得页面元素的坐标值实现思路及代码

Apr 15 Javascript

javascript(js)的小数点乘法除法问题详解

Mar 07 Javascript

JS获取时间的方法

Jan 21 Javascript

JavaScript中的getTimezoneOffset()方法使用详解

Jun 10 Javascript

Javascript闭包实例详解

Nov 29 Javascript

JavaScript中循环遍历Array与Map的方法小结

Mar 12 Javascript

es6的数字处理的方法（5个）

Mar 16 Javascript

详解vue前后台数据交互vue-resource文档

Jul 19 Javascript

浅谈angular4 ng-content 中隐藏的内容

Aug 18 Javascript

详解小程序退出页面时清除定时器

Apr 28 Javascript

jQuery操作选中select下拉框的值代码实例

Feb 07 jQuery

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