zoukankan      html  css  js  c++  java

  • 面试题（12）之手撕轮播图

    1、移动动画效果

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute; /*一定要记得加定位*/
        }
    </style>
</head>
<body>
<button id="btn">奔跑吧盒子</button>
<div id="demo"></div>
<script>
    var timer = null;
    var btn = document.getElementById("btn");
    var demo = document.getElementById("demo");
    // 点击按钮 让盒子跑
    btn.onclick = function () {
        clearInterval(timer);//防止重复设定定时器
        timer = setInterval(function () {
            var target = 400; // 目标值
            var leader = demo.offsetLeft; // 获取当前位置
            var step = 10;
            if (leader < target) {
                leader = leader + step;
                demo.style.left = leader + "px";
            } else {
                clearInterval(timer);
            }
        }, 15);
    };
</script>
</body>
</html>

    2、动画封装

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute; /*一定要记得加定位*/
        }
    </style>
</head>
<body>
<button id="btn1">奔跑到200吧盒子</button>
<button id="btn2">奔跑到400吧盒子</button>
<div id="demo"></div>
<script>
    var timer = null;
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var demo = document.getElementById("demo");
    //点击按钮 让盒子跑
    btn1.onclick = function () {
        animate(demo, 200);
    };
    btn2.onclick = function () {
        animate(demo, 400);
    };

    //需求 能够让任意对象移动到指定位置
    function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var leader = obj.offsetLeft;
            var step = 10;
            if (leader < target) {
                leader = leader + step;
                obj.style.left = leader + "px";
            } else {
                clearInterval(obj.timer);
            }
        }, 15);
    }
</script>
</body>
</html>

    3、动画改进

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute; /*一定要记得加定位*/
        }
    </style>
</head>
<body>
<button id="btn1">奔跑到200吧盒子</button>
<button id="btn2">奔跑到400吧盒子</button>
<div id="demo"></div>
<script>
    var timer = null;
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var demo = document.getElementById("demo");
    //点击按钮 让盒子跑
    btn1.onclick = function () {
        animate(demo, 200);
    };
    btn2.onclick = function () {
        animate(demo, 400);
    };

    //需求 能够让任意对象移动到指定位置
    function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var leader = obj.offsetLeft;
            var step = 10;
            step = leader < target ? step : -step; // step有了正负
            if (Math.abs(leader - target) >= Math.abs(step)) {
                leader = leader + step;
                obj.style.left = leader + "px";
            } else {
                obj.style.left = target + "px"; // 手动放到终点
                clearInterval(obj.timer);
            }
        }, 15);
    }
</script>
</body>
</html>

    4、简单轮播图

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .box {
         490px;
        height: 170px;
        margin: 100px auto;
        padding: 5px;
        border: 1px solid #ccc;
        overflow: hidden;
      }

      .inner {
         490px;
        height: 170px;
        background-color: pink;
        overflow: hidden;
        position: relative;
      }

      .inner ul {
        list-style: none;
        margin: 0;
        padding: 0;
         1000%;
        position: absolute;
        top: 0;
        left: 0;
      }

      .inner li {
        float: left;
      }

      .inner li img {
        vertical-align: top;
         490px;
        height: 170px;
      }

      /* 导航器 */
      .square {
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
      .square span {
        display: inline-block;
         16px;
        height: 16px;
        background-color: #fff;
        text-align: center;
        line-height: 16px;
        cursor: pointer;
      }
      .square span.current {
        background-color: orangered;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="box" id="box">
      <div class="inner">
        <ul>
          <li>
            <a href="#"><img src="images/01.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/02.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/03.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/04.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/05.jpg" alt="" /></a>
          </li>
        </ul>
        <div class="square">
          <span class="current">1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
        </div>
      </div>
    </div>
    <script>
      //需求：鼠标经过按钮 按钮排他 还要把ul以动画的方式移动到指定位置
      //1.鼠标经过按钮 按钮排他
      var box = document.getElementById('box')
      var inner = box.children[0]
      var ul = inner.children[0]
      var squareList = inner.children[1]
      var squares = squareList.children //所有按钮
      var imgWidth = inner.offsetWidth //图片宽度

      //给每一个按钮注册鼠标经过事件
      for (var i = 0; i < squares.length; i++) {
        squares[i].index = i //把索引保存在自定义属性中
        squares[i].onmouseover = function () {
          for (var j = 0; j < squares.length; j++) {
            squares[j].className = ''
          }
          //留下我自己
          this.className = 'current'
          //目标 和 当前按钮索引有关 和 图片宽度有关 而且是负数
          var target = -this.index * imgWidth
          animate(ul, target)
        }
      }

      function animate(obj, target) {
        console.log(target)
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
          var leader = obj.offsetLeft
          var step = 30
          step = leader < target ? step : -step //step有了正负
          if (Math.abs(leader - target) >= Math.abs(step)) {
            leader = leader + step
            obj.style.left = leader + 'px'
          } else {
            obj.style.left = target + 'px' //手动放到终点
            clearInterval(obj.timer)
          }
        }, 15)
      }
    </script>
  </body>
</html>

    5、轮播图左右焦点图

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      #box {
         490px;
        height: 270px;
        position: relative;
        border: 5px solid red;
        margin: 0 auto;
        overflow: hidden;
      }

      .ad {
         490px;
        height: 270px;
        position: relative;
      }

      .ad ul {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 0;
         2940px;
      }

      .ad ul li {
        float: left;
      }

      .ad ul li img {
         490px;
      }

      #arr {
        display: none;
      }

      #arr span {
         40px;
        height: 40px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -20px;
        background: #000;
        cursor: pointer;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: '黑体';
        font-size: 30px;
        color: #fff;
        opacity: 0.3;
        border: 1px solid #fff;
      }

      #arr #right {
        right: 5px;
        left: auto;
      }
    </style>
  </head>
  <body>
    <div id="box" class="all">
      <div class="ad">
        <ul id="imgList">
          <li><img src="images/01.jpg" /></li>
          <li><img src="images/02.jpg" /></li>
          <li><img src="images/03.jpg" /></li>
          <li><img src="images/04.jpg" /></li>
          <li><img src="images/05.jpg" /></li>
        </ul>
      </div>
      <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
      </div>
    </div>
    <script>
      //需求 点击左右箭头 以动画效果移动ul到指定位置
      //找人
      var box = document.getElementById('box')
      var ad = box.children[0]
      var ul = document.getElementById('imgList')
      var lis = ul.children
      var arr = document.getElementById('arr')
      var left = document.getElementById('left')
      var right = document.getElementById('right')
      var imgWidth = ad.offsetWidth //图片宽度
      //alert(imgWidth);
      //1.鼠标经过盒子 显示arr 鼠标离开后隐藏
      box.onmouseover = function () {
        arr.style.display = 'block'
      }
      box.onmouseout = function () {
        arr.style.display = 'none'
      }
      //2.点击右箭头 以动画的形式 把ul移动到指定的位置
      var pic = 0 //记录当前显示的图片的索引
      right.onclick = function () {
        //先判断 然后再去执行 移动ul的代码
        if (pic === lis.length - 1) {
          //如果是最后一个图片的索引 就不能再执行了
          return
        }
        pic++ //计算出接下来要显示的图片的索引
        //目标 和pic有关 和 图片宽度有关 而且是负数
        var target = -pic * imgWidth
        animate(ul, target)
      }
      left.onclick = function () {
        //先判断 然后再去执行 移动ul的代码
        if (pic === 0) {
          //如果是第一个图片的索引 就不能再执行了
          return
        }
        pic-- //计算出接下来要显示的图片的索引
        //目标 和pic有关 和 图片宽度有关 而且是负数
        var target = -pic * imgWidth
        animate(ul, target)
      }

      function animate(obj, target) {
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
          var leader = obj.offsetLeft
          var step = 30
          step = leader < target ? step : -step //step有了正负
          if (Math.abs(leader - target) >= Math.abs(step)) {
            leader = leader + step
            obj.style.left = leader + 'px'
          } else {
            obj.style.left = target + 'px' //手动放到终点
            clearInterval(obj.timer)
          }
        }, 15)
      }
    </script>
  </body>
</html>

    6、完整轮播图

     

    HTML：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
        border: 0;
      }

      .all {
         500px;
        height: 200px;
        padding: 7px;
        border: 1px solid #ccc;
        margin: 100px auto;
        position: relative;
      }

      .screen {
         500px;
        height: 200px;
        overflow: hidden;
        position: relative;
      }

      .screen li {
         500px;
        height: 200px;
        overflow: hidden;
        float: left;
      }

      .screen ul {
        position: absolute;
        left: 0;
        top: 0px;
         3000px;
      }

      .all ol {
        position: absolute;
        right: 10px;
        bottom: 10px;
        line-height: 20px;
        text-align: center;
      }

      .all ol li {
        float: left;
         20px;
        height: 20px;
        background: #fff;
        border: 1px solid #ccc;
        margin-left: 10px;
        cursor: pointer;
      }

      .all ol li.current {
        background: yellow;
      }

      #arr {
        display: none;
      }

      #arr span {
         40px;
        height: 40px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -20px;
        background: #000;
        cursor: pointer;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: '黑体';
        font-size: 30px;
        color: #fff;
        opacity: 0.3;
        border: 1px solid #fff;
      }

      #arr #right {
        right: 5px;
        left: auto;
      }
    </style>
  </head>
  <body>
    <div class="all" id="box">
      <div class="screen">
        <ul>
          <li><img src="images/01.jpg" width="500" height="200" /></li>
          <li><img src="images/02.jpg" width="500" height="200" /></li>
          <li><img src="images/03.jpg" width="500" height="200" /></li>
          <li><img src="images/04.jpg" width="500" height="200" /></li>
          <li><img src="images/05.jpg" width="500" height="200" /></li>
        </ul>
        <ol></ol>
      </div>
      <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
      </div>
    </div>
    <script>
      var timer = null
      //需求 实现一个 完整的轮播图
      //找人
      var box = document.getElementById('box')
      var screen = box.children[0]
      var ul = screen.children[0]
      var ol = screen.children[1]
      var ulLis = ul.children //所有的广告
      var imgWidth = screen.offsetWidth
      //alert(imgWidth);
      //箭头
      var arr = document.getElementById('arr')
      var left = document.getElementById('left')
      var right = document.getElementById('right')
      //1.动态生成结构
      //1.1根据图片数量动态生成按钮
      for (var i = 0; i < ulLis.length; i++) {
        var li = document.createElement('li')
        li.innerHTML = i + 1
        ol.appendChild(li)
      }
      var olLis = ol.children //所有的按钮
      olLis[0].className = 'current'
      //1.2克隆第一张广告 放到最后
      var firstImg = ulLis[0].cloneNode(true)
      ul.appendChild(firstImg)
      //2.鼠标经过按钮
      //鼠标经过按钮 按钮排他 以动画的形式把ul移动到指定的位置
      for (var j = 0; j < olLis.length; j++) {
        olLis[j].index = j
        olLis[j].onmouseover = function () {
          //排他
          //干掉所有人
          for (var k = 0; k < olLis.length; k++) {
            olLis[k].className = ''
          }
          //留下我自己
          this.className = 'current'
          //以动画的形式把ul移动到指定的位置
          //目标 和 按钮索引有关 和 图片宽度有关 而且是负数
          var target = -this.index * imgWidth
          animate(ul, target)
          //还要把几个索引统一
          pic = this.index
          square = this.index
        }
      }
      //3.鼠标点击箭头
      //3.1鼠标经过盒子 显示箭头 鼠标离开盒子 隐藏箭头
      box.onmouseover = function () {
        arr.style.display = 'block' //显示箭头
        clearInterval(timer) //停止自动播放
      }
      box.onmouseout = function () {
        arr.style.display = 'none' //隐藏箭头
        timer = setInterval(right.onclick, 1000) //从新自动播放
      }
      //3.2点击右箭头 以动画的形式把ul移动到指定的位置
      var pic = 0 //记录当前正在显示的图片的索引
      var square = 0 //记录当前正在亮起的按钮的索引
      right.onclick = function () {
        //先判断 如果是最后一个图片 先让ul瞬间跳会开始位置 然后索引也要归零
        if (pic === ulLis.length - 1) {
          ul.style.left = 0 + 'px'
          pic = 0 //索引也要归零
        }
        pic++ //计算出将要显示的图片的索引
        //目标 和pic有关 和 图片宽度有关 而且是负数
        var target = -pic * imgWidth
        animate(ul, target)
        //按钮也要跟着走
        if (square < olLis.length - 1) {
          square++
        } else {
          square = 0
        }
        //干掉所有人
        for (var i = 0; i < olLis.length; i++) {
          olLis[i].className = ''
        }
        //留下对应的
        olLis[square].className = 'current'
      }
      left.onclick = function () {
        //先判断 如果是第一个图片 先让ul瞬间跳到最后的位置 然后索引也要到最后
        if (pic === 0) {
          ul.style.left = -(ulLis.length - 1) * imgWidth + 'px'
          pic = ulLis.length - 1 //索引也要归零
        }
        pic-- //计算出将要显示的图片的索引
        //目标 和pic有关 和 图片宽度有关 而且是负数
        var target = -pic * imgWidth
        animate(ul, target)
        //按钮也要跟着走
        if (square > 0) {
          square--
        } else {
          square = olLis.length - 1
        }
        //干掉所有人
        for (var i = 0; i < olLis.length; i++) {
          olLis[i].className = ''
        }
        //留下对应的
        olLis[square].className = 'current'
      }

      timer = setInterval(right.onclick, 1000) //自动播放

      function animate(obj, target) {
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
          var leader = obj.offsetLeft
          var step = 30
          step = leader < target ? step : -step //step有了正负
          if (Math.abs(leader - target) >= Math.abs(step)) {
            leader = leader + step
            obj.style.left = leader + 'px'
          } else {
            obj.style.left = target + 'px' //手动放到终点
            clearInterval(obj.timer)
          }
        }, 15)
      }
    </script>
  </body>
</html>
  • 相关阅读:
    CDN网络（二）之配置和优化CDN核心缓存软件--squid
    CDN网络（一）之典型的CND架构与HTTP协议的缓存控制
    http+mysql结合keepalived做热备
    网络存储（四）之ISCSI的进阶
    Nginx系列3之Nginx+tomcat
    Nginx系列2之Nginx+php
    Nginx系列1之部分模块详解
    网络存储（三）之ISCSI搭建的入门
    网络存储（二）之ISCSI原理
    Testing
  • 原文地址：https://www.cnblogs.com/houfee/p/11151436.html
Copyright © 2011-2022 走看看