JS轮播图

轮播图可以说是网页上十分常见的效果，很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来，那么轮播图就是一个很不错的练手实例。下面就是通过JS写的轮播图效果：

功能介绍

1.上/下按钮切换图片
2.点击圆点按钮切换到相应的图片
3.自动播放效果 (4秒间隔)
4.当鼠标放在图片上时，停止轮播效果；鼠标移开图片时，又出现轮播效果

实现方法如下：

html代码

<div id="Box"><div class="img show">One</div><div class="img">Two</div><div class="img">Three</div><div class="img">Four</div><div class="img">Five</div><!--上一张按钮--><span class="prev"><</span><!--下一张按钮--><span class="next">></span><div class="div1"><span class="little little_show" data-index="0"></span><span class="little" data-index="1"></span><span class="little" data-index="2"></span><span class="little" data-index="3"></span><span class="little" data-index="4"></span></div>
</div>

CSS代码如下：

本文写的轮播图，主要依靠opacity属性的值来控制

    .img {position: absolute;top: 100px;left: 50%;width: 480px;height: 270px;margin-left: -240px;color: #FFFFFF;/*设置图片默认透明度为0 */opacity: 0;/*设置图片过度效果， 会出现淡入淡出效果 */transition: all .8s;}.img:nth-child(1){background: url("background/text1.jpg");background-size: 100%;}.img:nth-child(2){background: url("background/text2.jpg");background-size: 100%;}.img:nth-child(3){background: url("background/text3.jpg");background-size: 100%;}.img:nth-child(4){background: url("background/text4.jpg");background-size: 100%;}.img:nth-child(5){background: url("background/text5.jpg");background-size: 100%;}.prev {position: absolute;top: 185px;left: 50%;width: 20px;height: 30px;border: 1px solid rgba(255, 255, 255, .2);border-radius: 0 5px 5px 0;margin-top: 30px;margin-left: -240px;color: #c2c1cb;text-align: center;background-color: rgba(255, 255, 255, .2);cursor: pointer;}.next {position: absolute;top: 185px;left: 50%;width: 20px;height: 30px;border: 1px solid rgba(255, 255, 255, .2);border-radius:  5px 0 0 5px;margin-top: 30px;margin-left: 218px;color: #c2c1cb;text-align: center;background-color: rgba(255, 255, 255, .2);cursor: pointer;}.next:hover,.prev:hover {background-color: rgba(1, 1, 1, 0.73);color: #FFFFFF;}.div1 {position: absolute;top: 350px;left: 50%;margin-left: -40px;}.little {float: left;width: 10px;height: 10px;border-radius: 100%;background-color: rgba(255, 245, 244, .3);margin-left: 4px;cursor: pointer;border: 1px solid #464646;}.show{/*通过添加show，改变图片透明度，从而实现切换效果*/opacity: 1;}.little_show {background-color: #FFFFFF;}

JS代码如下：

let img = document.getElementsByClassName("img"); //获取所有轮播图片 集合
let next = document.querySelector(".next"); //获取下一张 按钮
let prev = document.querySelector(".prev");//获取上一张 按钮
let box = document.getElementById("Box");//获取整个盒子
let little = document.getElementsByClassName("little"); //获取所有轮播圆点按钮 集合let index = 0;
let time = 0;// 重置所有class
let clear = function () {for (let i = 0;i < img.length; i++){img[i].className = "img";}for (let i = 0;i < little.length;i++){little[i].className = "little";}
};let show = function () {img[index].className = "img show";little[index].className = "little little_show";time = 0;
};// 下一张
let nextBtn = function () {clear();index++;if(index >img.length-1){index = 0;}show();
};
next.addEventListener("click",function () {nextBtn();
});// 上一张
let prevBtn = function () {clear();index--;if(index < 0){index = img.length-1;}show();
};
prev.addEventListener("click",function () {prevBtn();
});// 按钮
for (let i = 0; i < little.length;i++){little[i].addEventListener("click",function () {clear();index = this.getAttribute("data-index");show();})
}let timer;//全局变量，接收定时器
function autoTime(){//timer接收定时器timer = setInterval(function () {time++;if(time === 4){nextBtn();}else if(time > 4){time = 0;}console.log("time = "+time);},1000);
}
// 调用轮播图自动播放方法
autoTime();// 当鼠标移入imgBox时，停止轮播，清除定时器
box.onmouseover = function () {clearInterval(timer);
};
// 当鼠标移出imgBox时，重新调用定时器并重置time
box.onmouseout = function () {time = 0;autoTime();
};

以上就是JS轮播图的代码，小伙伴们可以参考代码手动敲一敲；

这几天写页面的时候，发现写轮播图的时候自己脑子有点转不过来了…
所以写这篇文章记录一下，方便自己后续查看，也给更多想写JS轮播图的朋友提供一个参考…

前端小白一枚，路过的还请大佬勿喷…
有什么不对的地方也请各位大佬指点…

JS轮播图（点击切换、自动播放、悬停控制）相关推荐

JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
JS实现轮播图（手动切换+自动切换两种方法）
1.轮播图效果图 2.完整代码如下 <!doctype html> <html> <head> <meta charset="utf-8" ...
js轮播图(点击图片切换定时器效果)
轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换不说别的直接上代码 <!DOCTYPE html> <html> <head><titl ...
使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？
一.需求分析这两天讨论了一个项目需求,刚开始是希望:轮播图中嵌入视频,轮播到视频自动播放,播放完毕切换下一张轮播,手动切换时暂停播放视频.后面因为自动播放没有声音,便暂时放弃了这个想法(有知道或了解 ...
js 轮播图中点击小圆圈图片跳到指定图片
html代码(部分) <div class="w"><div class="main"><di ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...

JS轮播图（点击切换、自动播放、悬停控制）