原生JS写轮播效果

秒速五厘米 2023-07-16 11:55 30阅读 0赞

## 一、设计概述 ##

> 这次的轮播图功能很全面，里面有鼠标事件效果，比如鼠标移入，停止自动播放，鼠标离开图片开始自动播放，当鼠标移入时会有箭头出现，鼠标离开始时箭头就会消失，图片可以通过点击左右箭头来切换，也可以通过点击li里面的小圆点来切换。这个轮播图主要运用到DOM，事件，Date对象里面自动调用函数和清空自动调用函数的知识了。

## 二、程序运行效果 ##

![鼠标移动到banner里面时效果][banner]  
![鼠标离开时效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]

## 三、代码 ##

**body代码**

<div id="banner" onmouseover="oClear()" onmouseout="oStart()">
            <img src="img/1.jpg" id="img" >
            <ul id="list">
                <li class="bg" onclick="bannerIcon(0)"></li>
                <li onclick="bannerIcon(1)"></li>
                <li onclick="bannerIcon(2)"></li>
                <li onclick="bannerIcon(3)"></li>
                <li onclick="bannerIcon(4)"></li>
            </ul>
            <a  onclick="leftBtn()" id="left" class="leftBtn" href="javascript:void (0)"><</a>
            <a  onclick="rightBtn()" id="right" class="rightBtn" href="javascript:void (0)">></a>
    </div>

**css样式代码**

<style> *{ padding: 0;margin: 0;text-decoration: none;border: 0;list-style: none;}
            #banner{ width: 500px;height: 333px;position: relative;margin: auto;}
            #banner #list{ width: 100px;height: 20px;position: absolute;bottom: 0;left: 50%;margin-left: -50px;}
            #banner #list li{ width: 10px;height: 10px;border-radius: 5px;background: black;float: left;margin-right: 10px;margin-top: 5px;}
            #banner #list li:hover{ cursor: pointer;background: darkred;}
            .bg{ background: darkred !important;}
            #banner .leftBtn{ left: 0;}
            #banner .rightBtn{ right: 0;}
            #banner .leftBtn ,.rightBtn{ display:none;width:30px; height:50px;color: black;background: rgba(0,0,0,.3);position: absolute;top: 50%;margin-top: -25px;line-height: 50px;text-align: center;}
            #banner .leftBtn:hover, .rightBtn:hover{ background: rgba(0,0,0,.8);color: #fff;}
    </style>

**js代码**

var index = 0;
            var arr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
            function oBannerImg() { 
                index++;
                if (index>=arr.length){ 
                    index=0;
                }
                var img = document.getElementById("img");
                img.src=arr[index];
                oDot();
            }
            function oDot() { 
                var list = document.getElementById("list");
                var li= list.getElementsByTagName("li");
                for(var i = 0;i<li.length;i++){ 
                   li[i].className="";
                }
                li[index].className="bg";
            }
            var h = setInterval("oBannerImg()",1000);
            function oClear() { 
                clearInterval(h);
                var left = document.getElementById("left");
                var right = document.getElementById("right");
                left.style.display="block";
                right.style.display="block";
            }
            function oStart() { 
                h = setInterval("oBannerImg()",1000);
                var left = document.getElementById("left");
                var right = document.getElementById("right");
                left.style.display="none";
                right.style.display="none";
            }
            function leftBtn() { 
                index == 0 ? index=arr.length-1:index--;
                var img = document.getElementById("img");
                img.src=arr[index];
                oDot();
            }
            function rightBtn() { 
                index == arr.length-1?index=0:index++;
                var img = document.getElementById("img");
                img.src=arr[index];
                oDot();
            }
            //点点图片跟着变
            function bannerIcon(p) { 
                index = p;
                var img = document.getElementById("img");
                img.src=arr[index];
                oDot();
            }

*如果你感觉我这篇文章对您有帮助的话，或者感觉这篇文章写的不错，可以给我点个赞，作为我的鼓励！如果有什么对代码不理解的问题，随时可以私信我，我会帮你解答哒~*

[banner]: /images/20230528/923effdbf9144170bd3333ef41a9fec6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]: /images/20230528/bc61a3756e0745dba4c00374a0a562d2.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JS 原生手写轮播图

只是实现了原生JS实现轮播图的逻辑和具体实现代码，css样式并未进行美化实现了以下功能 (1) 点击容器container下方小圆点可以进行切换 (2) 点击左右的

不念不忘少年蓝@/ 2023年10月11日 22:08/ 0 赞/ 66 阅读

相关原生JS写轮播效果

一、设计概述 > 这次的轮播图功能很全面，里面有鼠标事件效果，比如鼠标移入，停止自动播放，鼠标离开图片开始自动播放，当鼠标移入时会有箭头出现，鼠标离开始时箭头就会消失，图

秒速五厘米/ 2023年07月16日 11:55/ 0 赞/ 31 阅读

相关原生JS实现简易图片自动轮播效果

直接上代码 <!doctype html> <html> <head> <meta charset="utf-8" /> <

谁践踏了优雅/ 2023年02月26日 12:21/ 0 赞/ 227 阅读

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果，

比眉伴天荒/ 2022年10月06日 07:52/ 0 赞/ 395 阅读

相关原生 js 实现各种轮播图效果

js 轮播图是利用 window 对象的 setInterval（）方法，clearInterval（）方法，setTimeout（）方法以及clearTimeout（）方

Love The Way You Lie/ 2022年05月28日 10:23/ 0 赞/ 328 阅读

相关使用原生js实现轮播图效果

这几天在逛网站的时候，发现很多网站都有轮播图这个效果，所以我就仿照小米的官网用原生js写了一个轮播图效果，希望大家喜欢。这是我发布在github上的最后实现的效果：[ht

古城微笑少年丶/ 2022年04月16日 02:16/ 0 赞/ 350 阅读

相关原生js实现简单轮播图效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页<

Love The Way You Lie/ 2022年04月06日 07:49/ 0 赞/ 345 阅读

相关 JS原生之图片轮播效果

见解请评论 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

绝地灬酷狼/ 2022年03月30日 09:58/ 0 赞/ 337 阅读

相关用js原生代码写轮播

本文是用js原生代码写轮播，为自己的难点做一次总结，主要是借鉴老师，而后自己写来了供自己参考。所以要写轮播图先要写好自己想要的html样式如图一所示 ![在这里插入图

左手的ㄟ右手/ 2022年03月17日 01:19/ 0 赞/ 227 阅读

相关用js写图片轮播效果

用js写图片轮播效果轮播效果有两种，位移轮播（位移又分为上下和左右）和渐变轮播。两种轮播的HTML是一样的结构，只是css和js有一点点区别。 ![效果图][wate

雨点打透心脏的1/2处/ 2022年02月24日 11:55/ 0 赞/ 299 阅读