欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS---案例：完整的轮播图---重点！

程序员文章站 2022-10-04 12:38:40
案例：完整的轮播图 思路： 分5部分做 1. 获取所有要用的元素 2. 做小按钮，点击移动图标部分 3. 做右边焦点按钮，点击移动图片，小按钮颜色一起跟着变 （克隆了第一图到第六图，用索引liObj.setAttribute("index", i)，pic = this.getAttribute(" ......

案例：完整的轮播图

 

思路：

分5部分做

1. 获取所有要用的元素

2. 做小按钮，点击移动图标部分

3. 做右边焦点按钮，点击移动图片，小按钮颜色一起跟着变 （克隆了第一图到第六图，用索引liobj.setattribute("index", i)，pic = this.getattribute("index");pic++, 当pic到5的时候，就回到pic=0的时候，同时设置样式）

4. 做左边焦点按钮 (用索引，当pic=0的时候，pic--，设置样式)

5. 自动轮播加上，设置个定时器，鼠标进入就清除定时器，鼠标移开就启用定时器

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

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

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

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

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

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

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

    .all ol li.current {
      background: #db192a;
    }

    #arr {
      display: none;
    }

    #arr span {
      width: 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/1.jpg" width="500" height="200" /></li>
        <li><img src="images/2.jpg" width="500" height="200" /></li>
        <li><img src="images/3.jpg" width="500" height="200" /></li>
        <li><img src="images/4.jpg" width="500" height="200" /></li>
        <li><img src="images/5.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 src="common.js"></script>
  <script>

    //获取最外面的div
    var box = my$("box");
    //获取相框
    var screen = box.children[0];
    //获取当前相框的宽度
    var imgwidth = screen.offsetwidth;
    //获取ul
    var ulobj = screen.children[0];
    //获取ul中所有的li
    var list = ulobj.children;
    //获取ol
    var olobj = screen.children[1];
    //获取焦点的div
    var arr = my$("arr");

    var pic = 0;//全局变量
    //创建小按钮，根据ul中li的个数
    for (var i = 0; i < list.length; i++) {
      //创建li标签，加入到ol中
      var liobj = document.createelement("li");
      olobj.appendchild(liobj);
      liobj.innerhtml = (i + 1);
      //在每个ol中的li标签上添加一个自定义属性，存储索引值
      liobj.setattribute("index", i);
      //注册鼠标进入时间
      liobj.onmouseover = function () {
        //先干掉所有ol中的li背景颜色
        for (var j = 0; j < olobj.children.length; j++) {
          olobj.children[j].removeattribute("class");
        }
        //设置当前鼠标进入li的背景颜色
        this.classname = "current";
        //设置鼠标进入的li的当前索引值
        pic = this.getattribute("index");
        //移动ul
        animate(ulobj, -pic * imgwidth);
      };
    }

    //克隆一个ul中第一个li，加入到ul中的最后----克隆
    ulobj.appendchild(ulobj.children[0].clonenode(true));

    //  自动播放
    var timeid = setinterval(clickhandle, 1000);

    //鼠标进入到box 显示左右焦点的div
    box.onmouseover = function () {
      arr.style.display = "block";
      //鼠标进入废掉之前的定时器
      clearinterval(timeid);
    };
    //鼠标离开box，隐藏左右焦点的div
    box.onmouseout = function () {
      arr.style.display = "none";
      timeid = setinterval(clickhandle, 1000);
    };

    //右边按钮
    my$("right").onclick = clickhandle;
    function clickhandle() {
      //如果pic的值是5，恰巧是ul中li的个数-1的值，此时页面显示第六个图片
      //而客户认为这是一个图，所以如果用户再次点击按钮，应该看到第二个图片
      if (pic == list.length - 1) {
        //如何从第六个图跳转到第一个图
        pic = 0; //先设置pic=0;
        ulobj.style.left = 0 + "px";//把ul位置还原成开始的默认位置
      }
      pic++;//立刻设置pic+1，那么用户就会看到第二个图片；
      animate(ulobj, -pic * imgwidth);
      //如果pic==5,此时显示第六个图，内容是第一张图片，第一个小按钮有颜色
      if (pic == list.length - 1) {
        //第五个颜色干掉
        olobj.children[olobj.children.length - 1].classname = "";
        olobj.children[0].classname = "current";
      } else {
        //干掉所有小按钮背景颜色
        for (var i = 0; i < olobj.children.length; i++) {
          olobj.children[i].removeattribute("class");
        }
        olobj.children[pic].classname = "current";
      }
    };

    //左边按钮
    my$("left").onclick = function () {
      if (pic == 0) {
        pic = 5;
        ulobj.style.left = -pic * imgwidth + "px";
      }
      pic--;
      animate(ulobj, -pic * imgwidth);
      //设置小按钮的颜色---先所有小按钮干掉颜色
      for (var i = 0; i < olobj.children.length; i++) {
        olobj.children[i].removeattribute("class");
      }
      //当前pic索引对应的按钮，设置颜色
      olobj.children[pic].classname = "current";
    };

// </script>

</body>

</html>

上一篇： Git常用命令总结

下一篇： Python语言基础06-字符串和常用数据结构

推荐阅读