前言

轮播图的案例非常经典，写法也非常多，我在写一个自己用的比较多的写法，帮助大家理解，在网页的设计中，可以直接拿去用（记得换图片路径哦！），仅供参考学习。

轮播图案例

代码如下（示例）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}#slideshow {width: 800px;height: 600px;overflow: hidden;position: relative;margin: 50px auto;}#pre {position: absolute;top: 250px;left: 368px;width: 50px;height: 100px;font-size: 40px;opacity: 0.5;cursor: pointer;}#next {position: absolute;top: 250px;left: 1118px;width: 50px;height: 100px;font-size: 40px;opacity: 0.5;cursor: pointer;}#imglist li {position: absolute;opacity: 0;}#dotlist {position: absolute;bottom: 30px;width: 100px;display: flex;justify-content: space-between;left: 50%;transform: translate(-50%);}#dotlist > li {width: 20px;height: 20px;text-align: center;border-radius: 50%;background-color: rgb(206, 16, 16);opacity: 0.3;cursor: pointer;user-select: none;}#imglist > li.appear,#dotlist > li.appear {opacity: 1;}</style>
</head><body><div id="slideshow"><ul id="imglist"><li><img src="1.gif" alt=""></li><li><img src="2.gif" alt=""></li><li><img src="3.gif" alt=""></li><li><img src="4.gif" alt=""></li><li><img src="5.gif" alt=""></li></ul><ul id="dotlist"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>
<button id="pre"><</button>
<button id="next">></button>
<script>//获取元素var slideShow = document.getElementById("slideshow");var imgList = document.getElementById("imglist");var imgs = imgList.children;var dotList = document.getElementById("dotlist");var dots = dotList.children;var pre = document.getElementById("pre");var next = document.getElementById("next");var duration = 2000;var Index = 0;var count = imgList.children.length;var timer;window.onload = function () {imgList.children[0].classList.add("appear");dotList.children[0].classList.add("appear");for (var i = 0; i < dots.length; i++) {dots[i].index = i;dots[i].onclick = changeMe;}timer = setInterval(rotate, duration);slideShow.onmouseover = function (event) {clearInterval(timer);};slideShow.onmouseout = function (event) {timer = setInterval(rotate, duration);};pre.onclick = preImg;next.onclick = nextImg;}function change() {for (var i = 0; i < dots.length; i++) {dots[i].classList.remove("appear");imgs[i].classList.remove("appear");}dots[Index].classList.add("appear");imgs[Index].classList.add("appear");}//循环切换图片function rotate() {Index++;if (Index == count) {Index = 0;}change();}function preImg() {Index--;if (Index < 0) {Index = count - 1;}change();}function nextImg() {Index++;if (Index == count) {Index = 0;}change();}function changeMe() {Index = this.index;change();}
</script>
</body>
</html>

效果图如下：

总结

里面的一些事件操作，我在前面的文章基本都讲到了，遇到不明白的可以翻翻我以前写的事件操作，也欢迎大家留言、私信我，我会尽力帮大家解决问题。

如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！

JS实现轮播图点击切换、按钮切换功能相关推荐

js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
HTML页面: 页面布局 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
轮播图实现html,html、css、js实现轮播图
2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
利用js实现轮播图（上一张，下一张，选取第几张，动画等）
今天来说一下利用js实现轮播图效果思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'><div class=&qu ...

JS实现轮播图点击切换、按钮切换功能

JS实现轮播图点击切换、按钮切换功能

前言

轮播图案例

总结

JS实现轮播图点击切换、按钮切换功能相关推荐

最新文章

热门文章