原生js实现轮播图

深藏阁楼爱情的钟 2022-06-14 02:12 329阅读 0赞

**原生js简单轮播图**

**实现原理**：

**一系列大小相等的图片平铺，利用css布局，只显示其中一张图片，其它图片隐藏。通过偏移量来实现滑动，或者手动点击来实现滑动**。

![Image 1][]

**Html布局**

<body>
    <div id="container">
        <div id="list" style="left: 0px">
           
            <img src="./img/pic_01.png" alt="1" />
            <img src="./img/pic_02.png" alt="2" />
            <img src="./img/pic_03.png" alt="3" />
            <img src="./img/pic_04.png" alt="4" />
            <img src="./img/pic_05.png" alt="5" />
            
        </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>

父容器container存放所有内容，list子容器存放图片，buttons子容器存放按钮小圆点。下面的表示轮播的两个箭头。

**进行优化，实现无缝轮播**

**当从最后一张图滚动到第一张图时，中间有很大的空白。**

**CSS部分**

**  注意list部分，overfloat : hidden ; 显示一张图片，其它图片隐藏。**

<style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
    
        body {
            padding: 20px;
        }
    
        #container {
            position: relative;
            width: 600px;
            height: 400px;
            border: 3px solid #333;
            margin: 50px auto;
            overflow: hidden;
        }
    
        #list {
            position: absolute;
            z-index: 1;
            width: 4200px;
            height: 400px;
        }
    
        #list img {
            float: left;
            width: 600px;
            height: 400px;
        }
    
        #buttons {
            position: absolute;
            left: 250px;
            bottom: 20px;
            z-index: 2;
            height: 10px;
            width: 100px;
        }
        #buttons span {
            float: left;
            margin-right: 5px;
            width: 10px;
            height: 10px;
            border: 1px solid #fff;
            border-radius: 50%;
            background: #333;
            cursor: pointer;
        }
        #buttons .on {
            background: orangered;
        }
        .arrow {
            position: absolute;
            top: 180px;
            z-index: 2;
            display: none;
            width: 40px;
            height: 40px;
            font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #fff;
            background-color: RGBA(0, 0, 0, .3);
            cursor: pointer;
        }
        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }
        #container:hover .arrow {
            display: block;
        }
    
        #prev {
            left: 20px;
        }
    
        #next {
            right: 20px;
        }
    </style>

**如下图所示：**

![Image 1][]

**JS部分**

**首先实现手动点击左右箭头，实现图片的偏移；**

function animate(offset) {
        console.log(list.style.left);
        //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值， //且style.left获取的是字符串，需要用parseInt()取整转化为数字。 var newLeft = parseInt(list.style.left) + offset;
        list.style.left = newLeft + 'px';
        if(newLeft<-2400){
            list.style.left = 0 + 'px';
        }
        if(newLeft>0){
            list.style.left = -2400 + 'px';
        }
    }

**但是现在问题来了，当点击图片到最后一张时候，无法跳到第一张。原因是我们用left偏移量来控制图片，在点击箭头时偏移量在发生变化，为了在最后一张图片点击时能跳到第一张图片，我们需要对偏移量做一个判断；**

**  在animate函数里加上一个关于偏移量的判断；**

prev.onclick = function() {
        animate(600);
    }
    next.onclick = function() {
        animate(-600);
    }

加上该判断后运行下，能跳转到第一页，没问题。

**自动轮播，顾名思义就是自己能切换图片，则此时需要给他添加一个定时器**

**这里我们是用setInterval()，因为我们的图片需要循环滚动**

var timer;
    function play(){
        timer = setInterval(function () {
            prev.onclick()
        }, 1500)
    }
    play();

**当把鼠标移到图片上面时，停止自动切换，鼠标移开时继续自动切换**

function stop(){
        clearInterval(timer);
    }
    //为什么不用stop(); container.onmouseover = stop;
    container.onmouseout = play;

**（有必要强调一下对于定时器，有必要说明一下setInterval()跟setTimeout的区别了。简单来说，setInterval()执行多次，setTimeout()只执行一次。）**

**小圆点部分**

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(600);
        }
        next.onclick = function() {
            //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断 index += 1;
            if (index > 5) {
                index = 1;
            }
            buttonsShow();
            animate(-600);
        }
    }

**好了~把上述代码拼在一起，就能组成一个简单的轮播咯。**

[Image 1]:

发表评论取消回复

表情：

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

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

相关阅读

相关 js原生轮播图

1.先画轮播图片样式 2.再画轮播按钮 3.样式完成，写js代码 4.获取所有节点 <!DOCTYPE html> <html> <head> <t

灰太狼/ 2023年08月17日 15:59/ 0 赞/ 180 阅读

相关原生JS实现轮播图

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

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

相关 html原生js实现图片轮播,原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器，取代body，这样

冷不防/ 2022年10月06日 07:52/ 0 赞/ 326 阅读

相关原生js实现轮播图

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

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

相关原生JS实现轮播图

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

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

相关 JS原生轮播图实现

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

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

相关原生js实现轮播图

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

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

相关原生js轮播图

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

Bertha 。/ 2022年05月28日 12:21/ 0 赞/ 301 阅读

相关原生js实现轮播图

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

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

相关轮播图原生js实现

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

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