JavaScript实现简单的轮播图效果
轮播图：在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。
如何实现轮播图
如何才能在js里面做成一个轮播图呢，比如下面这种的，可以自动生成图片对应的小圆点、点击左右箭头可以跳到上或下一张图片、每隔几秒自动轮播，还可以点击小小圆点去到指定的图片。
HTML结构
首先我们创建一个HTML页面，这个结构很简单，用一个大的div嵌套两个div，取个名字叫slider，上面的div用来装图片，取个名字叫slider-img，下面的div就是控件，用来装上下张图片的按钮和小圆点，这个就叫做slider-ctrl。
<!DOCTYPE html><html><head lang='en'> <meta charset='UTF-8'> <title></title> <link rel='stylesheet' href='https://www.haobala.com/bcjs/css/index.css'/> <script src='https://www.haobala.com/public.js'></script> <script src='https://www.haobala.com/bcjs/js/index.js'></script></head><body> <div id='slider'><div class='slider-img'> <ul><li><a href='https://www.haobala.com/bcjs/13959.html#'><img src='https://www.haobala.com/bcjs/images/1.jpg' alt=''/></a></li><li><a href='https://www.haobala.com/bcjs/13959.html#'><img src='https://www.haobala.com/bcjs/images/2.jpg' alt=''/></a></li><li><a href='https://www.haobala.com/bcjs/13959.html#'><img src='https://www.haobala.com/bcjs/images/3.jpg' alt=''/></a></li><li><a href='https://www.haobala.com/bcjs/13959.html#'><img src='https://www.haobala.com/bcjs/images/4.jpg' alt=''/></a></li><li><a href='https://www.haobala.com/bcjs/13959.html#'><img src='https://www.haobala.com/bcjs/images/5.jpg' alt=''/></a></li><li><a href='https://www.haobala.com/bcjs/13959.html#'><img src='https://www.haobala.com/bcjs/images/6.jpg' alt=''/></a></li> </ul></div><div class='slider-ctrl'>//在这里自动生成小圆点 <span id='prev'></span> <span id='next'></span></div> </div></body></html>
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.png) no-repeat -24px -780px; text-indent: -99999px; margin: 0 5px; cursor: pointer;}.slider-ctrl-con.current { background-position: -24px -760px;}.prev,.next { position: absolute; top: 40%; width: 30px; height: 35px; background: url(../images/icon.png) no-repeat;}.prev { left: 10px;}.next { right: 10px; background-position: 0 -44px;}
js代码
首先需要做一波需求分析，能够理清思路，然后在来一步一步的写代码。我们先获取相关的元素，然后根据图片数量生成对应的小圆点，由于图片是堆叠在一起的，我们把其他的图都放到右边隐藏起来，显示第一张图片即可。随后需要点亮第一个小圆点，保证小圆点和图片是绑定在一起的。然后我们需要实现点击右箭头看到下一张图，点击左箭头看到上一张图，点击小圆点可以显示对应的图片，且都要点亮相对于的图片。最后就是让他自动轮播图片，鼠标移入时停止轮播，鼠标移出时继续轮播
window.onload = function(){ // 0 获取相关元素 // 总容器 var slider = document.getElementById(’slider’); // 所有图片li的集合 var imgLiS = slider.children[0].children[0].children; // 控制按钮的容器 var ctrlDiv = 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;// 放到最前面ctrlDiv.insertBefore(newPoint,ctrlDiv.children[0])// 2 所有的图片都放到右边imgLiS[i].style.left = width+'px' } // 2 轮播图显示第一幅图 imgLiS[index].style.left = 0; // 获取所有的小圆点 var ctrlS = ctrlDiv.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里面的值变成numindex = 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() }}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备