javascript中图片轮播效果代码(JavaScript实现简单的轮播图效果)
类别:编程学习 浏览量:2052
时间:2021-10-27 10:40:06 javascript中图片轮播效果代码
JavaScript实现简单的轮播图效果轮播图是什么?
轮播图:在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。这些图片就都是轮播图,这个模块就叫做轮播模块。
如何实现轮播图
如何才能在js里面做成一个轮播图呢,比如下面这种的,可以自动生成图片对应的小圆点、点击左右箭头可以跳到上或下一张图片、每隔几秒自动轮播,还可以点击小小圆点去到指定的图片。
HTML结构
首先我们创建一个HTML页面,这个结构很简单,用一个大的li嵌套两个li,取个名字叫slider,上面的li用来装图片,取个名字叫slider-img,下面的li就是控件,用来装上下张图片的按钮和小圆点,这个就叫做slider-ctrl。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/index.css"/> <script src="../public.js"></script> <script src="./js/index.js"></script> </head> <body> <li class="slider" id="slider"> <li class="slider-img"> <ul> <li><a href="#"><img src="images/1.jpg" alt="javascript中图片轮播效果代码(JavaScript实现简单的轮播图效果)" border="0" />
CSS代码
css代码非常简单,略。
* { margin: 0; padding: 0; } .slider { width: 310px; height: 265px; margin: 100px auto; position: relative; overflow: hidden; } .slider-img { width: 310px; height: 220px; } ul { list-style: none; } li { position: absolute; top: 0; left: 0; } .slider-ctrl { text-align: center; padding-top: 10px; } .slider-ctrl-con { display: inline-block; width: 24px; height: 24px; background: url(../images/icon.jpg" alt="javascript中图片轮播效果代码(JavaScript实现简单的轮播图效果)" border="0" />
js代码
首先需要做一波需求分析,能够理清思路,然后在来一步一步的写代码。我们先获取相关的元素,然后根据图片数量生成对应的小圆点,由于图片是堆叠在一起的,我们把其他的图都放到右边隐藏起来,显示第一张图片即可。随后需要点亮第一个小圆点,保证小圆点和图片是绑定在一起的。然后我们需要实现点击右箭头看到下一张图,点击左箭头看到上一张图,点击小圆点可以显示对应的图片,且都要点亮相对于的图片。最后就是让他自动轮播图片,鼠标移入时停止轮播,鼠标移出时继续轮播
window.onload = function(){ // 0 获取相关元素 // 总容器 var slider = document.getElementById('slider'); // 所有图片li的集合 var imgLiS = slider.children[0].children[0].children; // 控制按钮的容器 var ctrlli = slider.children[1]; // 左箭头(上一张按钮) var prev = document.getElementById('prev') // 右箭头(下一张按钮) var next = document.getElementById('next') // 容器的宽度 var width = slider.offsetWidth; // 用一个变量记录当前显示的图片的索引 var index = 0; // 1 根据图片数量生成对应的小圆点 for(var i=imgLiS.length-1;i>=0;i--){ var newPoint = document.createElement('span'); // 给每个节点里面记录他是第几个节点,方便后期点击时候知道是第几个 newPoint.className = "slider-ctrl-con"; newPoint.innerHTML = i; // 放到最前面 ctrlli.insertBefore(newPoint,ctrlli.children[0]) // 2 所有的图片都放到右边 imgLiS[i].style.left = width+"px" } // 2 轮播图显示第一幅图 imgLiS[index].style.left = 0; // 获取所有的小圆点 var ctrlS = ctrlli.children; // 3 点亮第一个小圆点 light() // 4 点击左箭头可以看前一幅图,点亮对应的小圆点 prev.onclick = prevImg; // 5 点击右箭头可以看后一幅图,点亮对应的小圆点 next.onclick = nextImg; // 6 点击小圆点,点亮这个小圆点,并显示对应的图片 for(var i=0;i<imgLiS.length;i++){ ctrlS[i].onclick = function(){ var num = +this.innerHTML; if(num>index){ // 我认为后面的图在右边 imgLiS[num].style.left = width+"px"; // 当前图去左边 move(imgLiS[index],'left',-width) // 我要看的图去中间 move(imgLiS[num],'left',0) } if(num<index){ // 我认为前面的图在左边 imgLiS[num].style.left = -width+"px"; // 当前图去右边 move(imgLiS[index],'left',width) // 我要看的图去中间 move(imgLiS[num],'left',0) } // 更新index index = num; // 点亮小圆点 light() } } // 7 可以自动轮播图: 每隔3秒看下一张 var timer = setInterval(nextImg,3000) // 8 鼠标移入停止轮播 slider.onmouseenter = function(){ clearInterval(timer) } // 9 鼠标移出继续轮播 slider.onmouseleave = function(){ clearInterval(timer) timer = setInterval(nextImg,3000) } // 由于点亮小圆点多次执行,封装成函数 function light(){ for(var i=0;i<imgLiS.length;i++){ ctrlS[i].className = "slider-ctrl-con" } ctrlS[index].className = "slider-ctrl-con current" } // 看上一张图的函数 function prevImg(){ var num = index-1; if(num<0){ // 索引最小是0,如果要看的索引比0小,就是最后一张,也就是第length-1张 num = imgLiS.length-1; } // 我认为前一张图一定在左边 imgLiS[num].style.left = -width+"px"; // 当前图片运动到右边 move(imgLiS[index],'left',width) // 要看的图片运动到中间 move(imgLiS[num],'left',0) // 运动完成以后容器里面显示的是num这个图 // 所以记录当前索引的index里面的值变成num index = num; light() } // 看下一张图的函数 function nextImg(){ var num = index + 1; if(num>imgLiS.length-1){ num = 0; } // 我认为下一张一定在右边 imgLiS[num].style.left = width+"px"; // 当前图片去左边 move(imgLiS[index],'left',-width) // 我要看的下一张去中间 move(imgLiS[num],'left',0) // 更新index的值 index = num; light() } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- js日历图片(js实现简单日历效果)
- js日期格式化
- chrome调试js
- js中作用域
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- python提取json数据(Python爬取数据保存为Json格式的代码示例)
- js 出现cannot find function(Fatal error: Call to a member function read on a non-object in 错误解决方法)
- JS文件智能提示另一个JS文件中的成员
- pythonjson格式化原理(详解pythonstr与json类型转换)
- JS中sort()和reverse()
- extjs xtype的使用
- python3json序列化(Python3.5 Json与pickle实现数据序列化与反序列化操作示例)
- js简单小游戏代码(用JS实现飞机大战小游戏)
- js数组去重复
- 禁止鼠标右键的JS代码
- oppo手机的三种录屏方法,你知道有哪些吗(oppo手机的三种录屏方法)
- 吉林神秘传染链跨省 传染源尚未找到,舒兰 封城(吉林神秘传染链跨省)
- 吉林舒兰 封城 聚集性疫情传播链已延至沈阳,有一个细节让人忧心(吉林舒兰封城)
- 1天密接者猛增77人,患者轨迹透露危险信号 吉林市全面封闭管理(1天密接者猛增77人)
- 吉林舒兰 封城 15人确诊 276人隔离,出现跨省传播(吉林舒兰封城)
- 四月新番CP人气榜公布,《剃须》两度上榜,沙优不是女朋友(四月新番CP人气榜公布)
热门推荐
- mysql常见错误分析(分析MySQL抛出异常的几种常见解决方式)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- python开启多线程(python 多线程重启方法)
- python数据分析pandas教程(11个Python Pandas小技巧让你的工作更高效附代码实例)
- css特效边框流线动画(CSS 动画实现动态气泡背景的方法)
- 好用又便宜的云主机(如何购买真正的云主机)
- php实现session入库实例(PHP使用Session实现上传进度功能详解)
- nginx proxypass配置(nginx location中多个if里面proxy_pass的方法)
- dockercp用法详解(Docker开启TLS和CA认证的方法步骤)
- javascript函数工具有哪些(如何让你的JavaScript函数更加优雅详解)