用JS实现完整轮播图

最新推荐文章于 2020-06-12 20:57:19 发布
最新推荐文章于 2020-06-12 20:57:19 发布
阅读量156 收藏
点赞数
分类专栏： JavaScript笔记 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>完整的轮播</title>
  <style>
    * {
      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: 5500px;
    }

    .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/摄影44.PNG" width="500" height="200" />
        </li>
        <li>
          <img src="images/摄影17.PNG" width="500" height="200" />
        </li>
        <li>
          <img src="images/摄影18.PNG" width="500" height="200" />
        </li>
        <li>
          <img src="images/摄影28.PNG" width="500" height="200" />
        </li>
        <li>
          <img src="images/摄影42.PNG" width="500" height="200" />
        </li>
        <li>
          <img src="images/摄影49.PNG" width="500" height="200" />
        </li>
        <li>
          <img src="images/摄影56.PNG" width="500" height="200" />
        </li>
        <li>
          <img src="images/摄影63.PNG" width="500" height="200" />
        </li>
        <li>
          <img src="images/摄影66.PNG" width="500" height="200" />
        </li>
        <li>
          <img src="images/摄影81.PNG" 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>
    // 获取需要得元素
    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;
    // 根据图片的张数，确定几个小圆点。
    for (var i = 0; i < list.length; i++) {
      //  创建有序列表，下面有序的那个
      var liObj = document.createElement("li");
      //  添加到OL中
      olObj.appendChild(liObj);
      liObj.innerHTML = (i + 1);
      //   在每一个li中添加一个自定义属性，存储索引值
      liObj.setAttribute("index", i);
      liObj.onmouseover = function () {
        // 排他
        for (var j = 0; j < olObj.children.length; j++) {
          olObj.children[j].removeAttribute("class");
        }
        this.className = "current";
        pic = this.getAttribute("index");
        animate(ulObj, -pic * imgWidth);
      };
    }


    // 设置默认情况下第一个有背景色
    olObj.children[0].className = "current";
    //  克隆一个ul中第一个li加入到ul中的最后（克隆）
    //  给用户无缝连接的感觉
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    // 自动播放
    var timeId = setInterval(clickHandle, 100);
    //鼠标进入到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() {
      // 如果到了最后一张图（ 和第一张一样的图），跳转到第一张图
      if (pic == list.length - 1) {
        pic = 0;
        //把ul移到最开始的位置
        ulObj.style.left = 0 + "px";
      }
      // 立马显示第二张图
      pic++;
      animate(ulObj, -pic * imgWidth);
      // 如果到了所有图片的最后一张（克隆的那张）
      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 = list.length - 1;
        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");
      }
      olObj.children[pic].className = "current";
    };

    document.onkeyup = function (e) {
           if(e.keyCode==37){
            my$("left").onclick();
           }else if(e.keyCode==39){
            my$("right").onclick();   
           }

    }









    //封装动画函数,把谁移到哪里。
    function animate(element, target) {
      // 清理定时器，作用是让定时器不会再前一次的基础上，就会匀速
      clearInterval(element.timeId);
      // e给元素添加属性，每次执行函数的时候，只有一个定时器。就是元素的这个timeId属性
      element.timeId = setInterval(function () {
        //要移动一个元素，首先应该获取一个元素的当前位置。
        var current = element.offsetLeft;
        //每次移动多少像素
        var step = 10;
        // 当前位置是在目标的左边还是右边，左边表示正值递增，右边以为这负值递减
        step = current < target ? step : -step;
        // 每走一步给当前的位置加上步数
        current += step;
        // 判断是否移动，如果目标与当前位置的距离大于步数
        if (Math.abs(target - current) > Math.abs(step)) {
          // 当前位置就是current
          element.style.left = current + "px";
        } else {
          // 否则（目标与当前位置的距离小于步数），直接到达目标
          element.style.left = target + "px";
          clearInterval(element.timeId)
        }

      }, 15);

    };
  </script>
</body>

</html>
courageFei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现轮播图
10-25
使用JavaScript实现轮播的几个效果，定时切换、点击切换和滑过切换。共享给一些刚接触JavaScript的小白。
原生JS实现图片轮播切换效果
10-20
总之，原生JavaScript实现图片轮播的关键在于掌握DOM操作和CSS样式的应用，同时合理利用定时器函数`setInterval`来实现图片的平滑切换。这一过程中，对事件监听和条件判断的合理使用也非常重要。掌握这些技术，即使...
利用JS实现完整轮播图
qq_45020131的博客
06-12 253
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>完整轮播图</title> <style> * { margin: 0; padding: 0; list-style: none; bo
JS实现轮播图
weixin_42218787的博客
09-04 197
CSS样式 <style> * { padding: 0; margin: 0; } ul, li { list-style-type: none; } div.main { width: 5...
轮播图
Avalon的博客
11-21 528
轮播图 *{ margin: 0; padding:0; } body{ background-color:rgb(0,0,0); } #igs{ margin: 10px auto; width: 700px; height: 350px; position: relative; } img{width: 700px;} .i
js实现轮播图效果 纯js实现图片自动切换
11-19
本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片； 2. 鼠标离开，恢复自动播放； 3. 点击...
原生js实现图片层叠轮播切换效果
10-22
【原生JS实现图片层叠轮播切换效果详解】 在网页设计中，动态的图片展示效果常常能够吸引用户的注意力，其中图片层叠轮播切换是一种常见的交互方式。本篇文章将深入探讨如何使用原生JavaScript来实现这一效果，帮助...
JavaScript实现图片轮播组件代码示例
10-21
本文将详细解析使用JavaScript实现图片轮播组件的过程，包括其关键技术和实现方法。图片轮播组件是一种常见的网页元素，用于在有限的显示空间内展示多张图片，通常具有自动播放和手动切换等功能。 首先，需要了解...
原生js实现点击轮播切换图片
11-21
通过合理布局HTML和CSS，再配合JavaScript处理图片切换逻辑，我们可以创建出一个功能完备的点击轮播图。这个过程涉及到的技能点包括：选择器的使用、DOM节点操作、事件处理、CSS样式控制以及基本的数学运算，这些都...
轮播图片代码
12-28
轮播图片jquery代码实现,可以实现图片的定时轮播效果,简单好学实用
轮播图源代码
06-17
用JavaScript做的轮播图，最新的思路，比较适合小白观看
html轮播图
08-26
这是我在学习web前端制作中，自己用jQuery封装的插件，所用图片来源于网络，仅供志同道合的朋友一起学习。
轮播图的实现
11-21
轮播图的实现,广告类似模板的实现,并且联系本人的博客可以更好的学习其中控件的使用
轮播图大全
06-13
实用的轮播图demo，里面有各种各样的布局样式，可以设置广告语，也可以隐藏，一键集成，简单实用。
js 轮播图
梦想家博客
03-30 151
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&am
html用js实现图片轮播
最新发布
06-01
好的，下面是一个简单的示例，实现图片轮播的效果： HTML部分 ```html <div id="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> ``` JavaScript部分 ```javascript var slider = document.getElementById("slider"); var images = slider.getElementsByTagName("img"); var index = 0; // 当前显示图片的下标 var timer = setInterval(function() { // 隐藏当前图片 images[index].style.display = "none"; // 下一张图片的下标 index = (index + 1) % images.length; // 显示下一张图片 images[index].style.display = "block"; }, 3000); // 每隔3秒切换一张图片 ``` 这段代码会将id为"slider"的div中的所有img元素轮流显示出来，每隔3秒自动切换到下一张图片。你可以根据需要修改图片切换的时间间隔、初始显示的图片等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值