用原生js实现轮播图自适应

﹏ヽ暗。殇╰゛Y 2022-03-10 14:07 233阅读 0赞

## 一些说明 ##

这是我根据网上的一位大牛分享的代码进行了一些改动，这是大牛的分享：[http://www.cnblogs.com/LIUYANZUO/p/5679753.html][http_www.cnblogs.com_LIUYANZUO_p_5679753.html]  
因为客户需求，我需要让轮播图宽度为100%，并且随着浏览器视窗的改变而改变，即需要达到宽度自适应的效果  
写博客主要是为了防止自己长时间不用而忘记，另外也想给同是小白的朋友们一些可供参考的资料，我已经给出了全部代码，希望需要的朋友可以跟着手敲一遍，更好理解，js代码都有注释，如果还是不懂得可以去看看那位大牛写的，非常详细并且易懂

## html部分 ##

<div id="container">
        <div id="list" style="left: -600px;">
          <a href="http://www.baidu.com"><img class="img" src="image/5.jpg" alt="5"></a>
          <a href="http://www.baidu.com"><img class="img" src="image/1.png" alt="1"></a>
          <a href="http://www.baidu.com"><img class="img" src="image/2.jpg" alt="2"></a>
          <a href="http://www.baidu.com"><img class="img" src="image/3.jpg" alt="3"></a>
          <a href="http://www.baidu.com"><img class="img" src="image/4.jpg" alt="4"></a>
          <a href="http://www.baidu.com"><img class="img" src="image/5.jpg" alt="5"></a>
          <a href="http://www.baidu.com"><img class="img" src="image/1.png" alt="1"></a>
        </div>
        <div id="buttons">
          <span index="1" class="on"></span>
          <span index="2"></span>
          <span index="3"></span>
          <span index="4"></span>
          <span index="5"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow"></a>
        <a href="javascript:;" id="next" class="arrow"></a>
      </div>

## css代码 ##

* {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }
    body {
      text-align: center;
      position: relative;
      min-width: 800px;
      overflow: -Scroll;
      overflow-x: hidden;
    }
    
    ul li {
      list-style: none;
    }
    
    #container {
      position: relative;
      width: 100%;
      height: 760px;
      overflow: hidden;
    }
    #list {
      position: absolute;
      z-index: 1;
      width: 700%;
      height: 760px;
    }
    #list img {
      float: left;
      height: 100%;
    }
    #buttons {
      position: absolute;
      left: 50%;
      margin-left: -50px;
      bottom: 20px;
      z-index: 2;
      height: 10px;
    }
    #buttons span {
      float: left;
      margin: 0 10px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #999;
      cursor: pointer;
    }
    #buttons .on {
      background: rgb(216, 219, 0);
    }
    .arrow {
      position: absolute;
      top: 50%;
      margin-top: -40px;
      z-index: 2;
      display: none;
      width: 60px;
      height: 96px;
      cursor: pointer;
    }
    #container:hover .arrow {
      display: block;
    }
    #prev {
      left: 20px;
      background-image: url('../image/pre.png');
      background-repeat: no-repeat;
    }
    #next {
      right: 20px;
      background-image: url('../image/next.png');
      background-repeat: no-repeat;
    }

## js代码 ##

window.onload = function () {
          var list = document.getElementById("list");
          var next = document.getElementById("next");
          var prev = document.getElementById("prev");
    
          // 初始化图片的宽度和第一张图片的位置
          var imgWidth = document.body.clientWidth;
          var img = document.getElementsByClassName('img');
          for (let i = 0; i < img.length; i++) {
            img[i].style.width = imgWidth + 'px';
          }
          list.style.left = -imgWidth + 'px';
    
          window.onresize = function () { // 实时监听浏览器窗口大小
            imgWidth = document.body.clientWidth;
            for (let i = 0; i < img.length; i++) {
              img[i].style.width = imgWidth + 'px';
            }
            list.style.left = -imgWidth + 'px';
          }
    
          function animate (offset) {
            // 获取的style.left是字符串，需要用parseInt()取整转化为数字**********是否要取负值
            var newLeft = parseFloat(list.style.left) + offset;
            if (newLeft < -imgWidth * 5) {
              list.style.left = -imgWidth + "px";
            } else if (newLeft > -imgWidth) {
              list.style.left = -imgWidth * 5 + "px";
            } else {
              list.style.left = newLeft + "px";
            }
          }
    
          // 设置图片循环滚动
          var timer;
          function play () {
            timer = setInterval(function () {
              next.onclick();
            }, 2000)
          }
          play();
    
          // 鼠标放在图片上时图片停止滚动     这里，我们需要对其DOM进行操作，所以需要获取整个轮播图区域
          var container = document.getElementById('container');
          function stop () {
            clearInterval(timer);
          }
          container.onmouseover = stop;
          container.onmouseout = play;
    
    
          // 以上一个简单的轮播图做完了，接下来给轮播图加上一排小圆点
          var buttons = document.getElementById("buttons").getElementsByTagName("span");
          var index = 1;
          function buttonsShow () {
            // 这里需要清除之前的样式
            for (var i = 0; i < buttons.length; i++) {
              if (buttons[i].className === "on") {
                buttons[i].className = '';
              }
            }
            // 数组从0开始，故index需要-1
            buttons[index - 1].className = 'on';
          }
          prev.onclick = function () {
            index -= 1;
            if (index < 1) {
              index = 5;
            }
            buttonsShow();
            animate(imgWidth);
          }
          next.onclick = function () {
            // 由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
            index += 1;
            if (index > 5) {
              index = 1;
            }
            buttonsShow();
            animate(-imgWidth);
          }
    
    
          // 现在实现鼠标点击任意一个点，切换到相应的图片，原理是通过偏移量去找到对应的图片
          for (let i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function () {
              // 偏移量获取：这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法
              // 由于这里的index是自定义属性，需要用到getAttribute()这个DOM 2级方法，去获取自定义index的属性
              var clickIndex = parseInt(this.getAttribute('index'));
              var offset = imgWidth * (index - clickIndex);
              animate(offset); // 存放鼠标点击后的位置，用于小圆点的正常显示
              index = clickIndex;
              buttonsShow();
            }
          }
        }

[http_www.cnblogs.com_LIUYANZUO_p_5679753.html]: http://www.cnblogs.com/LIUYANZUO/p/5679753.html

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS实现轮播图

本人前端小白一枚，代码可能比较冗余，在优化方面还有很大的提升空间，欢迎各位大佬指出。先来看看实现效果吧 ![在这里插入图片描述][watermark_type_ZmF

我不是女神ヾ/ 2023年06月06日 04:00/ 0 赞/ 21 阅读

相关用原生js实现轮播图

今天分享一下简单的轮播图制作过程，用原生js实现。虽然网上有各种插件制作的高大上又好用的轮播图，但还是要清楚它的基本原理。 1.基本原理将所有图片并排放到一个div中，然

清疚/ 2022年06月17日 13:11/ 0 赞/ 287 阅读

相关原生js实现轮播图

原生js简单轮播图实现原理：一系列大小相等的图片平铺，利用css布局，只显示其中一张图片，其它图片隐藏。通过偏移量来实现滑动，或者手动点击来实现滑动。 ![Im

深藏阁楼爱情的钟/ 2022年06月14日 02:12/ 0 赞/ 317 阅读

相关原生JS实现轮播图

原生JS实现轮播图 js实现轮播图，我经历了一下几个步骤： 1. 把静态界面写出来 2. 添加切换上一张下一张的箭头(为了省事，直接用的`<`和`>`…) 3.

迈不过友情╰/ 2022年06月08日 23:06/ 0 赞/ 383 阅读

相关 JS原生轮播图实现

作为一个PHP全栈攻城狮，不仅要会后端PHP和数据库，还要会前端JS。今天源码时代 [PHP培训][PHP] 学科老师要和大家分享一下JS原生编写轮播图的插件。说起轮播图，很

阳光穿透心脏的1/2处/ 2022年06月07日 10:56/ 0 赞/ 350 阅读

相关原生js实现轮播图

很多很多网站经常会用到一个特效，那就是轮播图，对于日新月异的前端技术来说其实就是一个框架一个接口的事，但轮播的原理是什么？用最原始的javascript来写又是

心已赠人/ 2022年06月02日 00:25/ 0 赞/ 300 阅读

相关用原生JS实现旋转轮播图

html代码 <div class="wrap" id="wrap"> <div class="slide" id="slide">

一时失言乱红尘/ 2022年05月27日 11:52/ 0 赞/ 226 阅读

相关原生js实现轮播图

轮播图基本上是前端所必须面临的一个功能。而且在网上可以找到各种各样的插件或者写法。但是我个人觉得还是写一下比较好。这里用到的是原生JS、CSS3相结合的写法。对IE 8

我就是我/ 2022年04月11日 12:45/ 0 赞/ 362 阅读

相关轮播图原生js实现

原生js实现轮播图　很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。　[

你的名字/ 2022年03月22日 11:46/ 0 赞/ 403 阅读

相关用原生js实现轮播图自适应

一些说明这是我根据网上的一位大牛分享的代码进行了一些改动，这是大牛的分享：[http://www.cnblogs.com/LIUYANZUO/p/5679753.htm

﹏ヽ暗。殇╰゛Y/ 2022年03月10日 14:07/ 0 赞/ 234 阅读