利用js实现轮播图（上一张，下一张，选取第几张，动画等）
2024-05-08 13:28:05
今天来说一下利用js实现轮播图效果
思路
1.首先我们要把需要用到的元素获取过来
<div class="all" id='box'><div class="screen"><!-- 无序列表 --><ul> <li><img src="./wf1.jpg" width="500" height="200" /></li><li><img src="./wf2.jpg" width="500" height="200" /></li><li><img src="./wf3.jpg" width="500" height="200" /></li><li><img src="./wf4.jpg" width="500" height="200" /></li><li><img src="./wf5.jpg" width="500" height="200" /></li></ul><!-- 有序列表 --><ol></ol></div><div id="arr"><span id="left"><</span><span id="right">></span></div></div>2.我们要让轮播图点到哪里执行到哪里，且颜色发生变化
3.给轮播图添加左右方向键，可以上下切换
4.让轮播图自己动起来
操作
1.先获取到元素，和需要用到的轮播图效果
1.先把需要用到的ul（照片），ol（点击框），nth（左右的按键）获取过来
var ul=document.querySelector('ul')var ol=document.querySelector('ol')var nth=document.querySelector('#arr')var box=document.querySelector('#box')var left=document.querySelector('#left')var right=document.querySelector('#right')2.封装一下动画效果，一会要用到
// 进行位置动画封装调用function animate(element,offset,setp,times){// 判断为true则删除，防止多个触发if(element.jsq){clearInterval(element.jsq)}// 获取当前offsetvar position=ul.offsetLeft// 判定如果移动位置小于现在的位置，则步长为负数if(offset<position){setp=-setp}// 开启间隙定时器if(Math.abs(position-offset)>Math.abs(setp)){element.jsq=setInterval(() => {position+=setpelement.style.left=position+'px'// 判断要是现在的位值和预订的位置相差不超过一步长，则停止计时器if(Math.abs(position-offset)<Math.abs(setp)){clearInterval(element.jsq)element.style.left=offset+'px'}}, times);}}动画的步骤：
1.传入时，查看是否有计时器的存在，如果有则清空，防止多个计时器并存的效果
2.判断一下，要移动到的位置是否大于原来的位置，大于则setp则加，小于则每次减去步长
3.开始计时器，进行移动
4.当现在的位置，和预定位置，距离相差小于步长则结束计时器，并把位置定到预定的位置上去，防止反复横跳
2.ol添加内容，加点击事件，图片移动，按钮变色
for(var i=0;i<ul.children.length;i++){var li=document.createElement('li')li.innerHTML=i+1// 给每一个li设置上自定义属性li.setAttribute('a',i)ol.appendChild(li)// 给ol下面每一个li设置点击事件ol.children[i].onclick=function(){// 循环所以li进行排他思想for(var i=0;i<ol.children.length;i++){ol.children[i].className=''}// 给当前点击的元素添加上class属性this.className='current'// 获取到当前点击li的自定属性的值看看是点击到第几张var index=this.getAttribute('a')console.log(index)// 查看照片每一张的宽度var imgwidth=ul.children[0].offsetWidth// 根据宽度乘上第几张得出该移动多少offset=index*-imgwidth// 调用动画函数animate(ul,offset,50,30)1.根据照片的数量去用for循环创建相同数量的按钮，用setAttriubre（‘a’，i）创建新自定义属性后添加到ol中，后边要用到
for(var i=0;i<ul.children.length;i++){var li=document.createElement('li')li.innerHTML=i+1// 给每一个li设置上自定义属性li.setAttribute('a',i)ol.appendChild(li)
}2.在这个循环中给所有的按钮添加绑定事件，让当前的按钮变颜色，其他的没有颜色，排他思想，在每一次点击的时候，当前的有，其他的全部清空
for(var i=0;i<ul.children.length;i++){var li=document.createElement('li')li.innerHTML=i+1// 给每一个li设置上自定义属性li.setAttribute('a',i)ol.appendChild(li)//新// 给ol下面每一个li设置点击事件ol.children[i].onclick=function(){// 循环所以li进行排他思想for(var i=0;i<ol.children.length;i++){ol.children[i].className=''}// 给当前点击的元素添加上class属性this.className='current'3.获取到当前点击的元素，的自定义属性的值，保存起来，用来设置页面的偏移量当前点击的值和每个照片相乘得出 ul的偏移量，记得加负号，应为是ul往左走，而不是视口往左走，然后调用之前我们写的动画函数
for(var i=0;i<ul.children.length;i++){var li=document.createElement('li')li.innerHTML=i+1// 给每一个li设置上自定义属性li.setAttribute('a',i)ol.appendChild(li)// 给ol下面每一个li设置点击事件ol.children[i].onclick=function(){// 循环所以li进行排他思想for(var i=0;i<ol.children.length;i++){ol.children[i].className=''}// 给当前点击的元素添加上class属性this.className='current'//新// 获取到当前点击li的自定属性的值看看是点击到第几张var index=this.getAttribute('a')console.log(index)// 查看照片每一张的宽度var imgwidth=ul.children[0].offsetWidth// 根据宽度乘上第几张得出该移动多少offset=index*-imgwidth// 调用动画函数animate(ul,offset,50,30)得出效果
3.给轮播图添加上一张，下一张按钮
（这里就不写css的样式了，最后会给到，先脑补。css最开始的时候是隐藏的）
1.开始获取过各种元素，所以现在就不需要获取，进入和离开分别写上事件就好了
// 鼠标进入事件box.onmousemove=function(){nth.style.display='block'} // 鼠标离开事件box.onmouseleave=function(){nth.style.display='none'}2.获取到当前页面， 设置点击事件，下一个++ 上一个--，然后套用之前onclick效果
for(var i=0;i<ul.children.length;i++){var li=document.createElement('li')li.innerHTML=i+1// 给每一个li设置上自定义属性li.setAttribute('a',i)ol.appendChild(li)// 给ol下面每一个li设置点击事件ol.children[i].onclick=function(){// 循环所以li进行排他思想for(var i=0;i<ol.children.length;i++){ol.children[i].className=''}// 给当前点击的元素添加上class属性this.className='current'// 获取到当前点击li的自定属性的值看看是点击到第几张var index=this.getAttribute('a')console.log(index)// 查看照片每一张的宽度var imgwidth=ul.children[0].offsetWidth// 根据宽度乘上第几张得出该移动多少offset=index*-imgwidth// 调用动画函数animate(ul,offset,50,30)// 新// 点击事件，index为当前点击的序号的自定义类名的值left.onclick=function(){if(index>0){index--}ol.children[index].click()}right.onclick=function(){if(index<4){index++}ol.children[index].click()}} }因为点击事件里面的值在外面获取不到，索性我就接着写
事件里面还可以调用事件 如 ol.children[index].click() 记得要加小括号，并且去掉on
3.在没有触发ol.onclick（没有点击下边的1,2,3,4,5）的时候，点击左右是不起效果的，所以在script上要添加一段代码
var Click=0right.onclick=function(){Click++if(Click==1){ol.children[1].click()}}这个时候就完成了第三部分的操作
4.让轮播图自己动起来
// 自动移动// 1.首先我们要在一开始的时候给第一个按钮添加颜色ol.children[0].className='current'// 2.开启计时器每5秒切换一次setInterval(function(){var position=ul.offsetLeft var imgwidth=ul.children[0].offsetWidth var indexs=Math.abs(position/imgwidth)//3. 获取现在的位置，和图片的长度，相除得到下标if(indexs>3){indexs=-1}ol.children[indexs+1].click()// 跳转的时候一定要加1},5000)1.首先我们要在一开始的时候给第一个按钮添加颜色，往后排他思想删除掉
2.得出下标，跳转要加1，要不然原地跳，第二圈开始的时候为-1，不是0，应为要＋1操作
就可以的到我们想要的结果了
整体代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;overflow: hidden;position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 3000px;}.all ol {position: absolute;right: 10px;bottom: 10px;line-height: 20px;text-align: center;}.all ol li {float: left;width: 20px;height: 20px;background: #fff;border: 1px solid #ccc;margin-left: 10px;cursor: pointer;}.all ol li.current {background: yellow;}#arr {display: none;z-index: 1000;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style>
</head>
<body><div class="all" id='box'><div class="screen"><!-- 无序列表 --><ul> <li><img src="./wf1.jpg" width="500" height="200" /></li><li><img src="./wf2.jpg" width="500" height="200" /></li><li><img src="./wf3.jpg" width="500" height="200" /></li><li><img src="./wf4.jpg" width="500" height="200" /></li><li><img src="./wf5.jpg" width="500" height="200" /></li></ul><!-- 有序列表 --><ol></ol></div><div id="arr"><span id="left"><</span><span id="right">></span></div></div><script>// 进行位置动画封装调用function animate(element,offset,setp,times){// 判断为true则删除，防止多个触发if(element.jsq){clearInterval(element.jsq)}// 获取当前offsetvar position=ul.offsetLeft// 判定如果移动位置小于现在的位置，则步长为负数if(offset<position){setp=-setp}// 开启间隙定时器if(Math.abs(position-offset)>Math.abs(setp)){element.jsq=setInterval(() => {position+=setpelement.style.left=position+'px'// 判断要是现在的位值和预订的位置相差不超过一步长，则停止计时器if(Math.abs(position-offset)<Math.abs(setp)){clearInterval(element.jsq)element.style.left=offset+'px'}}, times);}}// 1.获取元素var ul=document.querySelector('ul')var ol=document.querySelector('ol')var nth=document.querySelector('#arr')var box=document.querySelector('#box')var left=document.querySelector('#left')var right=document.querySelector('#right')// 2.ol中添加点击元素// 在ol循环添加lifor(var i=0;i<ul.children.length;i++){var li=document.createElement('li')li.innerHTML=i+1// 给每一个li设置上自定义属性li.setAttribute('a',i)ol.appendChild(li)// 给ol下面每一个li设置点击事件ol.children[i].onclick=function(){// 循环所以li进行排他思想for(var i=0;i<ol.children.length;i++){ol.children[i].className=''}// 给当前点击的元素添加上class属性this.className='current'// 获取到当前点击li的自定属性的值看看是点击到第几张var index=this.getAttribute('a')console.log(index)// 查看照片每一张的宽度var imgwidth=ul.children[0].offsetWidth// 根据宽度乘上第几张得出该移动多少offset=index*-imgwidth// 调用动画函数animate(ul,offset,50,30)// 点击事件，index为当前点击的序号的自定义类名的值left.onclick=function(){if(index>0){index--}ol.children[index].click()}right.onclick=function(){if(index<4){index++}ol.children[index].click()}} }// 鼠标进入事件box.onmousemove=function(){nth.style.display='block'} // 鼠标离开事件box.onmouseleave=function(){nth.style.display='none'}//鼠标右边点击事件var Click=0right.onclick=function(){Click++if(Click==1){ol.children[1].click()}}// 自动移动// 1.首先我们要在一开始的时候给第一个按钮添加颜色ol.children[0].className='current'// 2.开启计时器每5秒切换一次setInterval(function(){var position=ul.offsetLeft var imgwidth=ul.children[0].offsetWidth var indexs=Math.abs(position/imgwidth)//3. 获取现在的位置，和图片的长度，相除得到下标if(indexs>3){indexs=-1}ol.children[indexs+1].click()// 跳转的时候一定要加1},5000)</script>
</body>
</html>记得更改图片的路径
求打赏！！！！！ ！！！！ 让我吃馒头能加辣条
利用js实现轮播图（上一张，下一张，选取第几张，动画等）相关推荐
- 史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果 上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
- js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js
介绍 Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars. Github htt ...
- 使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
- 原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包 今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想 将一些图片在一行中平铺,然后计算偏移量再 ...
- 原生js实现轮播图实例教程
原生js实现轮播图实例教程 本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
- 轮播图实现html,html、css、js实现轮播图
2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...
- 原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
- JS实现轮播图的三种简单方法。
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一,通过更改图片的src来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg-,再通过js使用定时器去改变im ...
- 暑期学习日记31：js实现轮播图
本次学习了使用js实现轮播图效果,逻辑为: (1)通过函数autochange()将横向排列的图片列表定时左移,来达到自动轮播的效果. (2)通过imggo(n)函数通过改变marginleft样式移 ...
最新文章
- 简单数据结构(队列 栈 树 堆 )
- 花生增产对话万书波-农业大健康·万祥军：获山东科技最高奖
- 小米线刷包需要解压么_【连载】刷机教程之小米手机通用线刷教程
- 顶层const和底层const的区别
- 01-HTML基础与进阶-day5-录像262
- html from嵌套from
- 固定频率调用接口方案
- [译] 如何用 Python 写一个 Discord 机器人
- VS2010测试方面的文章
- CentOS 7安装zabbix 4.4(资源)
- JS中图片缓冲loading技术的实例代码
- java数据库编程--执行数据库更新操作
- SVN服务更换小记（由subversion更换为VisualSVN）
- 中职生c语言搜题软件,适合法考学生用的搜题软件，这几款帮你搞定！
- Java程序员简历这么写，还过不了筛选算我输
- mapbox gl文字标注算法基本介绍
- Arduino 红外接收码获取程序
- 微信Log日志分析——初步探索
- 多元线性回归多重共线性的危害
- 各种有意思的Github项目收集，不断更新