轮播图(DOM操作)

最新推荐文章于 2024-07-18 17:16:21 发布

转载最新推荐文章于 2024-07-18 17:16:21 发布 · 713 阅读

文章标签：

一、简单轮播图实现鼠标触摸底部进行轮播

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

        ul {
            list-style: none;
        }

        img {
            vert-align: top;
        }

        .box {
            width: 730px;
            height: 454px;
            border: 1px solid #aaa;
            background: #f2f2f2;
            padding: 5px;
            margin: 100px auto;
        }

        .inner {
            width: 730px;
            height: 454px;
            position: relative;
            overflow: hidden;
        }

        .inner ul {
            width: 7300px;
            position: absolute;
            left: 0;
            top: 0;
        }

        ul li {
            float: left;
        }

        .square {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        .square span {
            display: inline-block;
            width: 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/1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/6.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>
            <span>6</span>
        </div>
        <div id="focusD" class="fo">
            <span id="left">&lt;</span>
            <span id>&gt;</span>
        </div>
    </div>
</div>

<script>
    function my$(id) {
        return document.getElementById(id)
    }

    //最外面div
    var boxObj = my$('box')
    //相框
    var innerObj = boxObj.children[0]
    //相框宽度
    var imgWidth = innerObj.offsetWidth;
    //获取ul
    var ulObj = innerObj.children[0]
    //获取span
    var spanObjs = innerObj.children[1].children
    //循环遍历所有的span标签，注册鼠标进入的点击事件
    for (var i = 0; i < spanObjs.length; i++) {
        //循环的时候把索引值保存在每个span的自定义属性中
        spanObjs[i].setAttribute('index', i)
        //鼠标进入取消点击  然后在改变点击颜色
        spanObjs[i].onmouseover = function () {
            for (var j = 0; j < spanObjs.length; j++) {
                spanObjs[j].removeAttribute('class')
            }

            this.className = 'current'
            var index = this.getAttribute('index')
            console.log(index)
            animate(ulObj, -index * imgWidth)
            console.log(imgWidth)
        }
    }

    function animate(element, target) {
        clearInterval(element.timeId)
        element.timeId = setInterval(function () {
            var current = element.offsetLeft
            var step = 10
            step = current < target ? step : -step
            current += step
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + 'px'
            } else {
                clearInterval(element.timeId)
                element.style.left = target + 'px'
            }
        }, 10)
    }


</script>
</body>
</html>

二、左右按钮轮播图鼠标进入出现左右按钮点击进行轮播

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

        ul {
            list-style: none;
        }

        img {
            vert-align: top;
        }

        .box {
            width: 730px;
            height: 454px;
            border: 1px solid #aaa;
            background: #f2f2f2;
            padding: 5px;
            margin: 100px auto;
        }

        .inner {
            width: 730px;
            height: 454px;
            position: relative;
            overflow: hidden;
        }

        .inner ul {
            width: 7300px;
            position: absolute;
            left: 0;
            top: 0;
        }

        ul li {
            float: left;
        }

        .square {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        .square span {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            text-align: center;
            line-height: 16px;
            cursor: pointer;
        }

        .square span.current {
            background-color: orangered;
            color: #fff;
        }

        #focusD {
            display: none;
        }

        #focusD 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;
        }

        #focusD #right {
            right: 5px;
            left: auto;
        }

    </style>
</head>
<body>
<div class="box" id="box">
    <div class="inner">
        <ul>
            <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/6.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>-->
            <!--<span>6</span>-->
        <!--</div>-->
        <div id="focusD">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>
</div>

<script>
    function my$(id) {
        return document.getElementById(id)
    }

    //获取外层div
    var boxObj = my$('box')
    //获取相框
    var innerObj = boxObj.children[0]
    //相框宽度
    var imgWidth = innerObj.offsetWidth
    //获取ul
    var ulObj = innerObj.children[0]
    console.log(ulObj)
    //获取左右标签
    var focusDObj = my$('focusD')
    var leftObj = my$('left')
    var rightObj = my$('right')
    console.log(leftObj)
    console.log(rightObj)

    //鼠标离开事件
    box.onmouseout = function(){
        focusDObj.style.display = 'none'
    }
    //鼠标进入事件
    box.onmouseover = function(){
        focusDObj.style.display = 'block'
    }

    //右边按钮
    var index = 0
    my$('right').onclick = function () {
        if(index < ulObj.children.length - 1){
            index++
            animate(ulObj, -index*imgWidth)
        }
    }
    //左边按钮
    my$('left').onclick = function(){
        if(index > 0){
            index--
            animate(ulObj, index*imgWidth)
        }
    }

    function animate(element, target) {
        clearInterval(element.timeId)
        element.timeId = setInterval(function () {
            var current = element.offsetLeft
            var step = 10
            step = current < target ? step : -step
            current += step
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + 'px'
            } else {
                clearInterval(element.timeId)
                element.style.left = target + 'px'
            }
        }, 10)
    }

</script>
</body>
</html>

三、无缝连接轮播图

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

        ul {
            list-style: none;
        }

        img {
            vert-align: top;
        }

        .box {
            width: 730px;
            height: 454px;
            border: 1px solid #aaa;
            background: #f2f2f2;
            padding: 5px;
            margin: 100px auto;
        }

        .inner {
            width: 730px;
            height: 454px;
            position: relative;
            overflow: hidden;
        }

        .inner ul {
            width: 7300px;
            position: absolute;
            left: 0;
            top: 0;
        }

        ul li {
            float: left;
        }

        .square {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        .square span {
            display: inline-block;
            width: 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/1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
            <!--<li><a href="#"><img src="images/3.jpg" alt=""/></a></li>-->
            <!--<li><a href="#"><img src="images/4.jpg" alt=""/></a></li>-->
            <!--<li><a href="#"><img src="images/5.jpg" alt=""/></a></li>-->
            <!--<li><a href="#"><img src="images/6.jpg" alt=""/></a></li>-->
            <li><a href="#"><img src="images/1.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>-->
        <!--<span>6</span>-->
        <!--</div>-->
        <!--<div id="focusD" class="fo">-->
        <!--<span id="left">&lt;</span>-->
        <!--<span id>&gt;</span>-->
        <!--</div>-->
    </div>
</div>

<script>
    function my$(id) {
        return document.getElementById(id)
    }

    //最外面div
    var boxObj = my$('box')
    //相框
    var innerObj = boxObj.children[0]
    //相框宽度
    var imgWidth = innerObj.offsetWidth;
    //获取ul
    var ulObj = innerObj.children[0]
    var current = 0;
    f1 = function () {
        current -= 10
        if (current < -1460) {
//            clearInterval(timeId)
            ulObj.style.left = 0 + 'px'
            current = 0;
        } else {
            ulObj.style.left = current + 'px'
        }
    }
    var timeId = setInterval(f1, 20)

    boxObj.onmouseover = function(){
        console.log('停止')
        clearInterval(timeId)
    }
    boxObj.onmouseout = function(){
        console.log('继续')
        timeId = setInterval(f1 ,20)
    }

</script>
</body>
</html>

四、轮播图完整版

<!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);
    };
  }
  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";


  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  //自动播放
 var timeId= setInterval(clickHandle,1000);

  //鼠标进入到box的div显示左右焦点的div
  box.onmouseover = function () {
    arr.style.display = "block";
    //鼠标进入废掉之前的定时器
    clearInterval(timeId);
  };
  //鼠标离开到box的div隐藏左右焦点的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) {
      //如何从第6个图,跳转到第一个图
      pic = 0;//先设置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
    }
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
    animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    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";

  };

  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>


<script>


  //  var num=0;
  //  function f1(){
  //
  //    num=1000;
  //  }
  //  f1();
  //  console.log(num);
</script>
</body>
</html>

附加图片