JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)

HTML代码

<div class="box"><!-- ul就相当于我装图片的盒子 --><ul class="box_ul"><li class="box_li"><img src="data:images/messi3.jpg" alt=""></li><li class="box_li"><img src="data:images/messi1.jpg" alt=""></li><li class="box_li"><img src="data:images/messi2.jpg" alt=""></li><li class="box_li"><img src="data:images/messi3.jpg" alt=""></li><li class="box_li"><img src="data:images/messi1.jpg" alt=""></li></ul><!-- 左右两边按钮 --><div class="left"><a href="#"><span>< </span></a></div><div class="right"><a href="#"><span>> </span></a></div><!-- 小圆点 --><ul class="yuandian"><li class="point current"></li><li class="point"></li><li class="point"></li></ul></div>

CSS代码

<style>* {margin: 0;padding: 0;}a {text-decoration: none;}li {list-style: none;}.box {position: relative;width: 800px;height: 400px;margin: 0 auto;overflow: hidden;}.box_ul {position: absolute;top: 0px;left: -800px;width: 4000px;height: 400px;transform: translateX(0px);}.box_ul img {width: 800px;height: 400px;}.box_ul .box_li {float: left;}/* 左边箭头的样式 */.box .left {width: 60px;height: 100px;background-color: grey;position: absolute;top: 50%;margin-top: -50px;left: 1px;text-align: center;line-height: 100px;}.box .right {width: 60px;height: 100px;background-color: grey;position: absolute;top: 50%;margin-top: -50px;left: 741px;text-align: center;line-height: 100px;}.box a {display: inline-block;width: 60px;height: 100px;}/* 小圆点样式 */.yuandian {width: 60px;height: 16px;position: absolute;top: 375px;left: 50%;margin-left: -30px;}.yuandian li {width: 10px;height: 10px;border-radius: 50%;border-style: solid;border-width: 2px;border-color: slategray;float: left;margin-right: 5px;}.current {background-color: white;}</style>

JS代码

<script>//获取元素var yuandian = document.querySelector('.yuandian')//装小圆点的盒子var point = document.querySelectorAll('.point');//小圆点var boxLi = document.querySelectorAll('.box_li');//图片var boxUl = document.querySelector('.box_ul');//装图片的盒子var right = document.querySelector('.right');//右边按钮var left = document.querySelector('.left');//左边按钮var num = 0;//num记录我点击按钮的次数var circle = 0;//circle来记录小圆点的位置//让所有的小圆点都添加上点击事件for (var i = 0; i < point.length; i++) {//自定义属性point[i].setAttribute('index', i);//给小圆点添加上点击事件point[i].onclick = function () {//使用排它思想//第一步：干掉所有人for (var i = 0; i < point.length; i++) {point[i].className = 'point';}this.className = 'point current';var index = this.getAttribute('index');//将小圆点的自定义属性值传给numnum = index;//将小圆点的自定义属性传给circlecircle = index;//算法:自定义属性的值 * -盒子的宽度//'translateX(index*-800px)';boxUl.style.transform = 'translateX(' + index * -800 + 'px)';}}//右边按钮点击事件right.onclick = function () {//为什么要num++,因为num 进来的时候是0，如果是0第一次点击按钮的时候，位置不会动，所以需要++num++;boxUl.style.transition = 'transform 0.5s linear 0s';boxUl.style.transform = 'translateX(' + num * -800 + 'px)';//需要使用到无缝滚动技术(轮播图)if (num == boxLi.length - 2) {num = 0;setTimeout(() => {boxUl.style.transform = 'translateX(' + num * -800 + 'px)';boxUl.style.transition = 'none';}, 500);//时间需要跟过渡的时间匹配}//小圆点跟随我点击右边按钮的位置进行变化circle++;if (circle == boxLi.length - 2) {circle = 0;}//小圆点跟随排他思想for (var i = 0; i < point.length; i++) {point[i].className = 'point';}point[circle].className = 'point current';}//左边按钮点击事件left.onclick = function () {boxUl.style.transition = 'transform 0.5s linear 0s';if (num == 0) {num++;boxUl.style.transform = 'translateX(' + num * 800 + 'px)';setTimeout(() => {//为什么要-3，因为多加了一张图,length变成5num = boxLi.length - 3;boxUl.style.transition = 'none';boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';}, 500);//时间需要跟过渡的时间匹配} else {num--;boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';}//小圆点跟随我点击左边按钮的位置进行变化if (circle == 0) {circle = boxLi.length - 2;}circle--;//小圆点跟随排他思想for (var i = 0; i < point.length; i++) {point[i].className = 'point';}point[circle].className = 'point current';}//自动播放轮播图//鼠标移入事件boxUl.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}right.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}left.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}yuandian.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}//鼠标移出事件boxUl.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}right.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}left.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}yuandian.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}//使用定时器自动播放(setInterval())var timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次
</script>

最后源码附上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS+CSS+HTML实现轮播图案例</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;}li {list-style: none;}.box {position: relative;width: 800px;height: 400px;margin: 0 auto;overflow: hidden;}.box_ul {position: absolute;top: 0px;left: -800px;width: 4000px;height: 400px;transform: translateX(0px);}.box_ul img {width: 800px;height: 400px;}.box_ul .box_li {float: left;}/* 左边箭头的样式 */.box .left {width: 60px;height: 100px;background-color: grey;position: absolute;top: 50%;margin-top: -50px;left: 1px;text-align: center;line-height: 100px;}.box .right {width: 60px;height: 100px;background-color: grey;position: absolute;top: 50%;margin-top: -50px;left: 741px;text-align: center;line-height: 100px;}.box a {display: inline-block;width: 60px;height: 100px;}/* 小圆点样式 */.yuandian {width: 60px;height: 16px;position: absolute;top: 375px;left: 50%;margin-left: -30px;}.yuandian li {width: 10px;height: 10px;border-radius: 50%;border-style: solid;border-width: 2px;border-color: slategray;float: left;margin-right: 5px;}.current {background-color: white;}</style>
</head><body><div class="box"><!-- ul就相当于我装图片的盒子 --><ul class="box_ul"><li class="box_li"><img src="data:images/messi3.jpg" alt=""></li><li class="box_li"><img src="data:images/messi1.jpg" alt=""></li><li class="box_li"><img src="data:images/messi2.jpg" alt=""></li><li class="box_li"><img src="data:images/messi3.jpg" alt=""></li><li class="box_li"><img src="data:images/messi1.jpg" alt=""></li></ul><!-- 左右两边按钮 --><div class="left"><a href="#"><span>< </span></a></div><div class="right"><a href="#"><span>> </span></a></div><!-- 小圆点 --><ul class="yuandian"><li class="point current"></li><li class="point"></li><li class="point"></li></ul></div>
</body></html>
<script>//获取元素var yuandian = document.querySelector('.yuandian')//装小圆点的盒子var point = document.querySelectorAll('.point');//小圆点var boxLi = document.querySelectorAll('.box_li');//图片var boxUl = document.querySelector('.box_ul');//装图片的盒子var right = document.querySelector('.right');//右边按钮var left = document.querySelector('.left');//左边按钮var num = 0;//num记录我点击按钮的次数var circle = 0;//circle来记录小圆点的位置//让所有的小圆点都添加上点击事件for (var i = 0; i < point.length; i++) {//自定义属性point[i].setAttribute('index', i);//给小圆点添加上点击事件point[i].onclick = function () {//使用排它思想//第一步：干掉所有人for (var i = 0; i < point.length; i++) {point[i].className = 'point';}this.className = 'point current';var index = this.getAttribute('index');//将小圆点的自定义属性值传给numnum = index;//将小圆点的自定义属性传给circlecircle = index;//算法:自定义属性的值 * -盒子的宽度//'translateX(index*-800px)';boxUl.style.transform = 'translateX(' + index * -800 + 'px)';}}//右边按钮点击事件right.onclick = function () {//为什么要num++,因为num 进来的时候是0，如果是0第一次点击按钮的时候，位置不会动，所以需要++num++;boxUl.style.transition = 'transform 0.5s linear 0s';boxUl.style.transform = 'translateX(' + num * -800 + 'px)';//需要使用到无缝滚动技术(轮播图)if (num == boxLi.length - 2) {num = 0;setTimeout(() => {boxUl.style.transform = 'translateX(' + num * -800 + 'px)';boxUl.style.transition = 'none';}, 500);//时间需要跟过渡的时间匹配}//小圆点跟随我点击右边按钮的位置进行变化circle++;if (circle == boxLi.length - 2) {circle = 0;}//小圆点跟随排他思想for (var i = 0; i < point.length; i++) {point[i].className = 'point';}point[circle].className = 'point current';}//左边按钮点击事件left.onclick = function () {boxUl.style.transition = 'transform 0.5s linear 0s';if (num == 0) {num++;boxUl.style.transform = 'translateX(' + num * 800 + 'px)';setTimeout(() => {//为什么要-3，因为多加了一张图,length变成5num = boxLi.length - 3;boxUl.style.transition = 'none';boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';}, 500);//时间需要跟过渡的时间匹配} else {num--;boxUl.style.transform = 'translateX(' + -num * 800 + 'px)';}//小圆点跟随我点击左边按钮的位置进行变化if (circle == 0) {circle = boxLi.length - 2;}circle--;//小圆点跟随排他思想for (var i = 0; i < point.length; i++) {point[i].className = 'point';}point[circle].className = 'point current';}//自动播放轮播图//鼠标移入事件boxUl.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}right.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}left.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}yuandian.onmouseover = function () {//暂停定时器clearInterval(timer);timer = null;}//鼠标移出事件boxUl.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}right.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}left.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}yuandian.onmouseout = function () {//开始定时器timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次}//使用定时器自动播放(setInterval())var timer = setInterval(function () {//手动调用点击事件right.onclick();}, 2000);//2000代表2秒钟点击一次
</script>

图片可以用背景颜色替代

JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)相关推荐

原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
例子---JS无缝轮播图
DuangDuang,今天我们来一起说说JS实现无缝轮播.没错,顾名思义,就是我们脑子中浮现的类似淘宝主页面中间部分的那个滚动图.这个轮播图的使用频率还是很大的,所以还是很有必要好好研究一下的. 哈哈 ...
js轮播图片小圆点变化_纯js实现轮播图,详解(简单，无缝，小圆点,左右手动切换,自动轮动)...
无论用什么语言开发可视化界面,都有一个叫轮播图的东西.我们现在有个需求,如图: slideshow1.PNG 左右切换按钮默认为隐藏,当鼠标进入图片时,左右切换按钮时显示的,当鼠标离开图片时左右切换按 ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
轮播图（无缝轮播图）
1.无缝轮播核心: 在最后多加一张第一张图, 当达到最后一张t1的时候一瞬间将ul拉回到0的位置结构: <div class="wrap"><ul>&l ...

JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)

JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)相关推荐

最新文章

热门文章