轮播图（5）

贰拾壹先生

于 2021-03-12 13:30:26 发布

阅读量568

点赞数

分类专栏： Web前端文章标签： html 轮播图旋转木马 js

本文链接：https://blog.csdn.net/zheng18237111686/article/details/114693582

版权

Web前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

轮播（5）

轮播- JS 旋转木马（五）

1，需求，

继续完善轮播类型之中，常用的轮播—首页轮播，

2，原理

定义图片的初始化位置数组，之后所有的操作都是基于对这个数组进行修改，以此达到轮播效果，轮播的思路有很多中，也参考了很多网上其他人的方案，感觉这个思路是最容易也是方便实现的

实现旋转木马轮播图
1， 获取元素
2， 动态设置轮播图每一个盒子的样式
3， 鼠标移入和移除盒子，显示与隐藏左右两侧按钮
4， 添加按钮事件  
    点击右侧按钮，正向旋转， 把数组的第一个元素删除，添加到数组的最后一个元素上
    点击左侧按钮，反向旋转， 把数组的最后一个元素删除，添加到数组的第一个元素上面 
5， 根据变化过的数组，重新设置图片的样式

3，代码（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
     * {
         margin: 0px;
         padding: 0px;
         list-style: none;
     }
     a {
         text-decoration: none;
     }
     img {
         border:0; vertical-align: top;
     }
     a, button {
         cursor: pointer;
     }
     .wrap {
         width: 1200px;
         margin: 10px auto;
     }
     .slide {
         height: 500px;
         position: relative;
     }
     .slide li {
         position: absolute;
         left: 200px;
         top:0;
     }
     .slide li img {
         width: 100%;
     }
     .arrow {
         opacity: 1;
     }
     .prev, .next {
         height: 112px;
         position: absolute;
         top: 50%;
         margin-top: -56px;
         z-index: 99;
     }
     .next {
         right: 0;
     }
     #box {
         position: absolute;
         width: 300px;
         height: 300px;
         top:200px;
         left: 0px;
         background-color: pink;
     }
    </style>
    <script src="./util.js"></script>
</head>
<body>
     <div class="wrap" id="wrap">
        <div class="slide" id="slide">
           <ul>
               <li><a href="#"><img src="./../src/images/1.jpg" /></a></li>
               <li><a href="#"><img src="./../src/images/2.jpg" /></a></li>
               <li><a href="#"><img src="./../src/images/3.jpg" /></a></li>
               <li><a href="#"><img src="./../src/images/4.jpg" /></a></li>
               <li><a href="#"><img src="./../src/images/5.jpg" /></a></li>
           </ul>
           <div class="arrow" id="arrow">
               <a href="javascript:;" class="prev"><</a>
               <a href="javascript:;" class="next">></a>
           </div>
        </div>
     </div>
</body>
<script type="text/javascript">
 window.onload = function() {
    var arr = [
       {
         width: 400,
         top: 70,
         left: 50,
         opacity: 20,
         zIndex: 2
       },
       {
         width: 600,
         top: 120,
         left: 0,
         opacity: 80,
         zIndex: 3
       },
       {
         width: 800,
         top: 100,
         left: 200,
         opacity: 100,
         zIndex: 4
       },
       {
         width: 600,
         top: 120,
         left: 600,
         opacity: 80,
         zIndex: 3
       },
       {
         width: 400,
         top: 70,
         left: 750,
         opacity: 20,
         zIndex: 2
       }
   ]
   var slide = document.getElementById('slide')
   var liArr = slide.getElementsByTagName('li')
   var arrow = slide.children[1];
   setStyle()
   slide.onmouseenter = function() {
     slowSpeedAnimate(arrow, {opacity: 100});
     clearInterval(startAnimater)
   }
   slide.onmouseleave = function() {
     slowSpeedAnimate(arrow, {opacity: 0})
     startInterVal()
   }
   var boo = true; // 截流设置
   var startAnimater; // 定义定时器
   for(var a in arrow.children) {
       arrow.children[a].onclick = function() {
           if(boo) {
                if(this.className === 'prev') {
                arr.unshift(arr.pop()) // 删除最后一个元素，添加到第一个元素上面
            } else {
                arr.push(arr.shift())// 删除数组第一个元素,添加到最后一个
            }
            setStyle()
            boo = false
          }
       }
   }
   function setStyle() {
    for(var i=0; i < liArr.length; i++) {
      // 第一个参数： 轮播元素， 第二个参数： 属性， 第三个参数：轮播完的回调函数
       slowSpeedAnimate(liArr[i],arr[i], function() {
           boo = true // 回调函数
       });
   }
  }
  // 定时器
  function startInterVal() {
     startAnimater = setInterval(function() {
     arr.push(arr.shift())
     setStyle()
    }, 2000)
  }
  startInterVal()
 }
</script>
</html>

util.js (封装动画) 后续所有的轮播，都会用到这个JS

/*
 * @Description: 工具函数
 * @Version: 1.0
 */


 /**
  * @description 获取行内和内嵌样式，兼容性写法封装
  * @param {目标元素} ele 
  * @param {元素属性} attrName 
  */
function getStyle(ele, attrName) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(ele, null)[attrName];
    }
    return ele.currentStyle[attrName];
 }

 /**
  * @description 缓动动画函数封装
  * @param {目标元素} ele 
  * @param {所需的样式文本} json 
  * @param {*} callback 
  */
function slowSpeedAnimate(ele, jsonText, callback) {
    clearInterval(ele.timer)
    ele.timer = setInterval(function() {
        var boo = true
        for(var item in jsonText) {
            var nowState;
            if (item === 'opacity') {
                nowState = parseInt(getStyle(ele, item) * 100) || 100;             
            } else {
                nowState = parseFloat(getStyle(ele, item)) || 0;
                nowState = Math.round(nowState)
            }
            var step = (jsonText[item] - nowState) /10;
            step = step > 0 ? Math.ceil(step): Math.floor(step);
            nowState = nowState + step;
            if (item === 'opacity') {  // 开始移动
                ele.style[item] = nowState / 100;
                ele.style.filter = "alpha(opacity=" + nowState + ")"; // 兼容IE
            } else if (item === 'zIndex') {
                ele.style[item] = jsonText[item];
            } else {
                ele.style[item] = nowState + 'px';
            }
            if(nowState !== jsonText[item]) { // 到达终点，停止定时器
                boo = false
            }
        }
        if (boo) {
            clearInterval(ele.timer)
            if(typeof callback === 'function') {
                callback();
            }
        }
    },30)
 }