-
2021-05-28 10:43:02
轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换
不说别的直接上代码
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> div.show{ width:600px; height:400px; border:2px solid red; margin:0px auto; overflow: hidden; } .btn{ text-align: center; } .btn button{ margin:10px 40px; font-size: 32px; } .pic{ width: 100%; height: 100%; } </style> </head> <body> <div class="show"> <img src="./images/01.jpg" class ="pic"> <!-- 自己图片的地址 --> <img src="./images/640.jpg" class ="pic"> <img src="./images/02.jpg" class= "pic"> <img src="./images/03.jpg" class= "pic"> </div> <div class="btn"> <button class="prev">上一页</button> <button class="next">下一页</button> </div> <script type="text/javascript"> let setPic = [ // 将自己图片的地址存放到变量中 './images/01.jpg', './images/640.jpg', './images/02.jpg', './images/03.jpg', ]; let time = (function(){ // 定时器句柄 let hTime; function start(){ hTime = setInterval(function(){ showImg.src = setPic[ keyImg.inc() ]; },2000) } function stop(){ clearInterval(hTime); } return {start:start, stop:stop}; }()) // 围绕着下标 封装一个对象 let keyImg = (function(){ let i = 0; // 图片数组下标. 当前显示图片的下标 // 加1 function inc(){ i++; if (i >= setPic.length) { i = 0; } return i; } // 减1 function dec(){ i--; if (i < 0) { i = setPic.length-1; } return i; } return {inc:inc, dec:dec} }()) // 每隔2秒显示下一张图片 let showImg = document.querySelector('.show img') time.start(); // 上一张 let btnPrev = document.querySelector('.prev') btnPrev.onclick = function(){ // 停止定时器 time.stop(); // 设置减1后的图片为当前图片 showImg.src = setPic[ keyImg.dec() ]; // 开启定时器 time.start(); } // 下一张 let btnNext = document.querySelector('.next') btnNext.onclick = function(){ // 停止定时器 time.stop(); // 设置当前要显示的图片 showImg.src = setPic[ keyImg.inc() ]; // 开启定时器 time.start(); } </script> </body> </html>
这个就是轮播图效果了,如果文章对你有帮助,记得留下你的点赞加评论呦
更多相关内容 -
原生js实现点击轮播切换图片
2020-11-21 01:31:11本文实例为大家分享了js实现点击轮播切换图片的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击轮播图</title> </... -
原生js图片轮播切换代码
2021-06-24 10:41:47原生js图片轮播切换代码是一款带标题和索引左右按钮控制图片滚动轮播效果。 -
js图片轮播手动切换效果
2020-11-22 13:28:19它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果。 不需要调用jquery,初始化简单,使用非常的简单,便利。 实例效果: js代码: ... -
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2020-10-23 16:20:57今天主要给大家分享一段js和css代码组合实现鼠标点击按钮图片切换,图片自动切换,点击左右按钮图片切换三种效果,代码非常简单,需要的朋友一起来学习吧 -
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2020-10-22 19:19:57主要介绍了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果,可实现仿相册插件切换效果,并附代码demo源码供读者下载参考,需要的朋友可以参考下 -
使用JavaScript实现点击循环切换图片效果
2020-10-19 07:03:25本文通过实例代码给大家介绍了通过js实现点击循环切换图片效果,需要的朋友参考下 -
Js图片点击切换轮播实现代码
2021-01-21 11:06:01图片点击切换 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> [removed] [removed]=function(){ var btn1=document.getElementById(pre); var btn2... -
js轮播图透明度切换(带上下页和底部圆点切换)
2020-10-19 23:17:01本篇文章主要介绍了js轮播图透明度切换(带上下页和底部圆点切换)的实例。具有很好的参考价值。下面跟着小编一起来看下吧 -
js图片切换(点击左右按钮,小圆点切换图片,自动轮播)
2020-09-04 15:00:32点击左右按钮,小圆点切换图片 <; "right">>; "cont">1/4 "./img/1.jpg" alt="" id="pic"> "item"> "foot">one 小圆点的特殊样式 .item{ background: lightgreen; } js部分 获取元素 使用数组添加图片及图片信息 var...点击左右按钮,小圆点切换图片
<div> <button><</button> <button class="right">></button> <h2 id="cont">1/4</h2> <img src="./img/1.jpg" alt="" id="pic"> <ul> <li class="item"></li> <li></li> <li></li> <li></li> </ul> <h2 id="foot">one</h2> </div>
小圆点的特殊样式
.item{ background: lightgreen; }
js部分
获取元素
使用数组添加图片及图片信息var cont = document.getElementById('cont'); var foot = document.getElementById('foot'); var pic = document.getElementById('pic'); var oli = document.getElementsByTagName('li'); var btn = document.getElementsByTagName('button'); var arr = [ { picSrc:'./img/1.jpg', picCont : '1/4', picFoot:'one' }, { picSrc:'./img/2.jpg', picCont : '2/4', picFoot:'two' }, { picSrc:'./img/3.jpg', picCont : '3/4', picFoot:'three' }, { picSrc:'./img/4.jpg', picCont : '4/4', picFoot:'four' } ]; var count = 0; //记录点击次数
左边按钮
//左边按钮 btn[0].onclick = function () { count--; if(count<0){ // 图片到达第一张,使图片继续往后,即到达最后一张 count = arr.length-1; } for (var j =0; j<oli.length ; j++){//遍历小圆点 oli[j].className = ''; //初始化小圆点样式 } //将点击的次数作为小圆点的下标,改变小圆点的特殊样式 oli[count].className = 'item'; pic.src = arr[count].picSrc; cont.innerHTML = arr[count].picCont; foot.innerHTML = arr[count].picFoot; }
右边按钮
//右边按钮 btn[1].onclick = function () { count++; if(count>arr.length-1){ //如果点击的次数大于已有的图片数(到达最后一张图片),将count重新归0,即回到第一张 count = 0; } for (var j =0; j<oli.length ; j++){ //遍历小圆点 oli[j].className = ''; //初始化小圆点样式 } oli[count].className = 'item'; pic.src = arr[count].picSrc; cont.innerHTML = arr[count].picCont; foot.innerHTML = arr[count].picFoot; }
点击小圆点
//点击小圆点 for (var i = 0 ;i<oli.length; i++){ oli[i].index = i; oli[i].onclick = function () { //关键 count = this.index; for (var j =0; j<oli.length ; j++){//遍历小圆点 oli[j].className = ''; //初始化小圆点样式 } //将点击的次数作为小圆点的下标,改变小圆点的特殊样式 oli[count].className = 'item'; pic.src = arr[count].picSrc; cont.innerHTML = arr[count].picCont; foot.innerHTML = arr[count].picFoot; } }
自动轮播
setInterval(function () { console.log(oli.length); count++; if (count > oli.length-1 ) { count = 0; } change(); }, 1000)
效果
由于代码重复很多,可以使用函数封装
//封装函数 } function change(){ for (var j =0; j<oli.length ; j++){ oli[j].className = ''; } oli[count].className = 'item'; pic.src = arr[count].picSrc; cont.innerHTML = arr[count].picCont; foot.innerHTML = arr[count].picFoot; }
使用时调用即可
-
简单的实现点击箭头图片切换的js代码
2020-10-27 21:12:42个是一个简单的点击箭头图片切换的例子。JS部分采用过的是jQuery -
原生JS实现图片轮播切换效果
2020-10-20 21:13:53主要为大家详细介绍了原生JS实现图片轮播切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
常用相册图片左右点击切换轮播js特效.zip
2019-07-11 09:35:04常用相册图片左右点击切换轮播js特效,点击左右可以切换图片,经常用于企业网站或者商城网站首页,来制作广告图,php中文网推荐下载! -
js实现轮播图点击按钮切换下一张图片
2021-09-17 22:03:402.1点击右箭头让图片依次往后进行切换如果切换到最后一张回到第一张1--2--3--4--1 2.1.1获取元素按钮pimg 2.1.2添加事件加给按钮 2.1.3图片切换到下一张 2.1.4不知道是第几张图假设n=1 ...具体实现步骤:
2.1 点击右箭头 让图片依次往后进行切换 如果切换到最后一张 回到第一张 1--2--3--4--1
2.1.1 获取元素 按钮 p img
2.1.2 添加事件 加给按钮
2.1.3 图片切换到下一张
2.1.4 不知道是第几张图 假设 n = 1
2.1.5 更新img的地址 img.src = '';
2.1.6 图片+1 之后 判断是不是已经是最后一张 如果n == 5 n = 1
2.2 点击左箭头 让图片依次往前切换 如果是第一张 回到最后一张 1--4--3--2--1
2.2.1 获取元素 按钮 p img
2.2.2 添加事件 加给按钮
2.2.3 图片切换到上一张
2.2.4 通过 n 获取当前是第几张图片
2.2.5 更新img的地址 img.src = '';
2.2.6 图片-1 之后 判断是不是已经是第一张 如果n == 0 n = 4
<style> * { padding: 0; margin: 0; } .wrap { position: relative; width: 700px; height: 400px; margin: 10px auto; } .wrap p { color: #fff; text-align: center; line-height: 20px; background-color: #000; } .wrap img { vertical-align: middle; width: 100%; height: 360px; } .wrap button { width: 30px; height: 30px; font-size: 20px; color: #fff; background: rgba(0, 0, 0, 0.5); text-align: center; line-height: 30px; outline: none; position: absolute; top: 50%; margin-top: -15px; } .btn1 { right: 0; } .btn2 { left: 0; } </style>
<div class="wrap"> <p>1/4</p> <img src="./img1.jpg" alt=""> <p>动漫1</p> <button class="btn1">></button> <button class="btn2"><</button> </div>
<script> //1、获取元素 按钮 p img var img = document.getElementsByTagName('img')[0]; var btns = document.getElementsByTagName('button'); var ps = document.getElementsByTagName('p'); console.log(btns, img, ps); //4、不知道照片处于第几张 假设一个变量存初始值 var n = 1; //2、添加事件 加给按钮 btns btns[0].onclick = function () { //3、写具体代码操作 n++; console.log(n); if (n == 5) { n = 1 } //5、图片切换到下一张 img.src = './img' + n + '.jpg' //获取p标签内容 //设置p标签内容里面的数字 ps[0].innerHTML = n + '/4'; ps[1].innerHTML = '动漫' + n; } btns[1].onclick = function () { //3、写具体代码操作 图片切换到下一张 n--; console.log(n); if (n == 0) { n = 4 } //5、切换图片 img.src = './img' + n + '.jpg' //获取p标签内容 //设置p标签内容里面的数字 ps[0].innerHTML = '' + n + '/4'; ps[1].innerHTML = '动漫' + n; } </script>
效果:
-
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2020-10-21 22:32:07主要为大家详细介绍了Bootstrap 最常用的JS插件,包括图片轮播carousel.js、标签切换tab.js、滚动监听scrollspy.js等,感兴趣的小伙伴们可以参考一下 -
js图片轮播手动切换特效
2020-11-28 20:12:19先瞄一眼js图片轮播手动切换特效图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style>... -
js鼠标点击图片切换效果实现代码
2020-10-23 07:20:56为大家分享了js鼠标点击图片切换效果实现代码,特别炫酷的效果,推荐给大家,感兴趣的小伙伴们可以参考一下 -
利用JS实现点击按钮后图片自动切换的简单方法
2020-10-21 06:37:51下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
js弧形展示图片轮播切换代码
2021-04-07 20:45:00js弧形展示图片轮播切换代码是一款带左右箭头按钮的网站焦点图代码。 -
js实现图片和链接文字同步切换特效的方法
2020-10-24 16:55:01主要介绍了js实现图片和链接文字同步切换特效的方法,涉及javascript操作文字及图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 -
js鼠标点击图片切换效果代码分享
2020-10-23 17:19:39主要介绍了js鼠标点击图片切换效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下。 -
一个JavaScript 图片和文字切换的特效
2021-05-16 16:03:52内容索引:脚本资源,Ajax/JavaScript,文字切换 一个JavaScript 图片和文字切换的特效,如果我们把鼠标放到任一图片上,图片会滑开,文字说明会滑入,当然这个只是一种其中一种形式,还有的是直接滑入文字掩盖在图片... -
javascript图片切换综合实例(循环切换、顺序切换)
2020-10-22 23:42:30主要介绍了javascript图片切换综合实例,包括javascript图片循环切换、javascript图片顺序切换,两张图片的切换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
JS点击按钮切换黑白背景代码
2021-07-24 23:45:59JS点击按钮切换黑白背景代码是一款简单的网页黑白色背景切换,点击按钮明亮度背景颜色切换特效。 -
图片弧形展示轮播切换js代码
2020-06-11 02:36:01图片弧形展示轮播切换js代码是一款带左右箭头按钮的网站焦点图特效代码。 -
JS实现轮播图点击切换、按钮切换功能
2021-07-13 16:12:59JS实现轮播图点击切换、按钮切换功能前言轮播图案例总结 前言 轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦!),仅供...
前言
轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦!),仅供参考学习。
轮播图案例
代码如下(示例):
<!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>
效果图如下:
总结
里面的一些事件操作,我在前面的文章基本都讲到了,遇到不明白的可以翻翻我以前写的事件操作,也欢迎大家留言、私信我,我会尽力帮大家解决问题。
如果文章对你有帮助的话,请给我一个小小的点赞一波哦!每个赞和评论都是我编写文章的动力哦!
-
javascript 实现图片轮播和点击切换功能
2019-10-07 12:21:19图片轮播是网页上一个比较常见的功能,下面我们来实现他吧 原理很简单: 1:固定的区域,所有的图片重叠,一次只能显示一张图片 2:通过改变图片的zIndex属性改变显示的图片,就可以达到切换的效果了 <!-- ... -
点击链接切换显示不同的图片javascript版纯Javascript 有注释
2020-05-24 16:23:41点击链接切换显示不同的图片javascript版纯Javascript 有注释。 非常方便后续的开发扩展使用。