当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS---案例：完整的轮播图---重点！

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

2019年12月13日  | 移动技术网IT编程  | 我要评论

案例：完整的轮播图

 

思路：

分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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网