本文主要介绍用js实现轮播地图，播放上一张图片，下一张图片，可以选择哪张图片等效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
今天就来说说用js实现轮播效果，供大家参考。具体内容如下
思路
1.首先，我们需要得到我们需要的元素。
div class='all' id='box '
div class='screen '
！-无序列表-
保险商实验所
liimg src='。/wf1 . jpg ' width=' 500 ' height=' 200 '//Li
liimg src='。/wf2 . jpg ' width=' 500 ' height=' 200 '//Li
liimg src='。/wf3 . jpg ' width=' 500 ' height=' 200 '//Li
liimg src='。/wf4 . jpg ' width=' 500 ' height=' 200 '//Li
liimg src='。/wf5 . jpg ' width=' 500 ' height=' 200 '//Li
/ul
！-有序列表-
开环（同Open Loop）
/ol
/div
div id='arr'span id='left'lt。/spanspan id='right'gt。/span/div
/div
2.我们希望轮播地图无论走到哪里都被执行，并且颜色发生变化。
3.在转盘上添加左右方向键，可以上下切换。
4.让旋转木马自己移动。
操作
1.先获取到元素，和需要用到的轮播图效果
1.首先获取需要使用的ul(照片)、ol(点击框)和nth(左右按钮)。
var ul=document . query selector(' ul ')
var ol=document . query selector(' ol ')
var nth=document . query selector(# arr)
var box=document . query selector(# box)
var left=document . query selector(# left)
var right=document . query selector(# right)
2.封装动画效果，后面会用到。
//进行位置动画封装调用。
函数动画(元素、偏移、设定值、时间){
//如果判断为真，则删除，防止多次触发。
if(element.jsq){
clearInterval(element.jsq)
}
//获取当前偏移量
var position=ul.offsetLeft
//决定如果移动位置小于当前位置，步长为负。
if(offsetposition){
设定值=-设定值
}
//启动间隙计时器
if(Math.abs(位置偏移)Math.abs(设定)){
element.jsq=setInterval(()={
位置=设定值
element . style . left=位置' px '
//判断当前位值与预留位置之差不超过一步，则停止定时器。
if(Math.abs(位置偏移)Math.abs(设定)){
clearInterval(element.jsq)
element . style . left=偏移量' px '
}
}，次)；
}
}
动画的步骤：
1.传入时，检查是否有定时器，如果有，将其清零，防止多个定时器共存。
2.确定要移动的位置是否大于原始位置。如果大于，将增加setp，如果小于，每次将减少步长。
3.启动计时器并移动它。
4.当当前位置与预定位置之间的距离小于步长时，结束定时器，并将位置设置到预定位置，以防止重复水平跳跃。
2.ol添加内容，加点击事件，图片移动，按钮变色
for(var I=0；iul . children . length；i ){
var Li=document . createelement(' Li ')
li.innerHTML=i 1
//为每个li设置自定义属性。
li.setAttribute('a '，I)
ol.appendChild(李)
//为ol下面的每个li设置click事件
ol.children[i]。onclick=function(){
//循环往复，所以李专思。
for(var I=0；iol.children .长度；i ){
ol.children[i]。className=' '
}
//将class属性添加到当前单击的元素中
“当前”
//获取当前点击的li的自定义属性的值，看点击的是哪个页面。
var index=this.getAttribute('a ')
console.log(索引)
//检查每张照片的宽度
var imgwidth=ul.children[0]。偏移距离
//将数字乘以宽度，找出要移动的量。
offset=index*-imgwidth
//调用动画函数
动画(ul，偏移，50，30)
1.根据照片数量，使用for循环创建相同数量的按钮，使用setattribre(' a '，I)创建新的自定义属性并添加到ol中，后面会用到。
for(var I=0；iul . children . length；i ){
var Li=document . createelement(' Li ')
li.innerHTML=i 1
//为每个li设置自定义属性。
li.setAttribute('a '，I)
ol.appendChild(李)
}
2.在这个循环中给所有按钮添加绑定事件，让当前按钮变色，其他没有颜色，独占思想。每次单击时，当前按钮可用，所有其他按钮都被清除。
for(var I=0；iul . children . length；i ){
var Li=document . createelement(' Li ')
li.innerHTML=i 1
//为每个li设置自定义属性。
li.setAttribute('a '，I)
ol.appendChild(李)
//新建
//为ol下面的每个li设置click事件
ol.children[i]。onclick=function(){
//循环往复，所以李专思。
for(var I=0；iol.children .长度；i ){
ol.children[i]。className=' '
}
//将class属性添加到当前单击的元素中
“当前”
3.获取当前单击的元素的自定义属性的值，保存它，并使用它来设置页面的偏移量。将当前点击的值与每张照片相乘，得到ul的偏移量。记得加个负号，应该是ul向左而不是viewport向左，然后调用我们之前写的动画函数。
for(var I=0；iul . children . length；i ){
var Li=document . createelement(' Li ')
li.innerHTML=i 1
//为每个li设置自定义属性。
li.setAttribute('a '，I)
ol.appendChild(李)
//为ol下面的每个li设置click事件
ol.children[i]。onclick=function(){
//循环往复，所以李专思。
for(var I=0；iol.children .长度；i ){
ol.children[i]。className=' '
}
//将class属性添加到当前单击的元素中
“当前”
//新建
//获取当前点击的li的自定义属性的值，看点击的是哪个页面。
var index=this.getAttribute('a ')
console.log(索引)
//检查每张照片的宽度
var imgwidth=ul.children[0]。偏移距离
//将数字乘以宽度，找出要移动的量。
offset=index*-imgwidth
//调用动画函数
动画(ul，偏移，50，30)
获得结果
3.给轮播图添加上一张，下一张按钮
(这里就不写css的风格了。我最后会给的，我先补上。Css隐藏在开头)
1.我开始获取各种元素，现在不需要获取了。把事件分别写在入口和出口就行了。
//鼠标进入事件
box.onmousemove=function(){
nth.style.display='block '
}
//鼠标左键事件
box.onmouseleave=function(){
nth.style.display='none '
}
2.获取当前页面，设置click事件，next previous-，然后应用previous onclick效果。
for(var I=0；iul . children . length；i ){
var Li=document . createelement(' Li ')
li.innerHTML=i 1
//为每个li设置自定义属性。
li.setAttribute('a '，I)
ol.appendChild(李)
//为ol下面的每个li设置click事件
ol.children[i]。onclick=function(){
//循环往复，所以李专思。
for(var I=0；iol.children .长度；i ){
ol.children[i]。className=' '
}
//给当前点击的元素添加上班级属性
"当前"
//获取到当前点击里的自定属性的值看看是点击到第几张
var index=this.getAttribute('a ')
console.log(索引)
//查看照片每一张的宽度
var imgwidth=ul.children[0].偏移距离
//根据宽度乘上第几张得出该移动多少
offset=index*-imgwidth
//调用动画函数
动画(ul，偏移，50,30)
//新
//点击事件，索引为当前点击的序号的自定义类名的值
left.onclick=function(){
if(index0){
索引-
}
ol.children[index].单击()
}
right.onclick=function(){
if(index4){
指数
}
ol.children[index].单击()
}
}
}
因为点击事件里面的值在外面获取不到，索性我就接着写
事件里面还可以调用事件如ol.children[index].单击()记得要加小括号，并且去掉在
3.在没有触发ol.onclick(没有点击下边的1,2,3,4,5)的时候，点击左右是不起效果的，所以在脚本上要添加一段代码
var Click=0
right.onclick=function(){
点击
if(Click==1){
儿童[1].单击()
}
}
这个时候就完成了第三部分的操作
4.让轮播图自己动起来
//自动移动
//1.首先我们要在一开始的时候给第一个按钮添加颜色
ol.children[0].'当前'
//2.开启计时器每5秒切换一次
setInterval(function(){
var position=ul.offsetLeft
var imgwidth=ul.children[0].偏移距离
var indexs=数学。ABS(位置/图像宽度)
//3.获取现在的位置，和图片的长度，相除得到下标
if(索引3){
指数=-1
}
儿童.单击()
//跳转的时候一定要加一
},5000)
1.首先我们要在一开始的时候给第一个按钮添加颜色，往后排他思想删除掉
2.得出下标，跳转要加1,要不然原地跳，第二圈开始的时候为-1,不是0,应为要+1操作
就可以的到我们想要的结果了
整体代码
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '
标题文档/标题
style type='text/css '
* {
填充：0;
边距：0;
列表样式：无；
边框：0;
}。全部{
宽度：500像素
高度：200像素
填充：7px
边框：1px纯色# ccc
边距：100像素自动；
位置：相对；
}。屏幕{
宽度：500像素
高度：200像素
溢出：隐藏；
位置：相对；
}。屏幕李{
宽度：500像素
高度：200像素
溢出：隐藏；
浮动：左；
}。屏幕ul {
位置：绝对；
左：0;
top:0px；
宽度：3000像素
}。所有ol {
位置：绝对；
右：10px
底部：10px
行高：20px
文本对齐：居中；
}。所有ol李{
浮动：左；
宽度：20px
高度：20px
背景：# fff
边框：1px纯色# ccc
左边距：10px
光标：指针；
}。所有ol li.current {
背景：黄色；
}
#arr
显示：无；
z指数：1000;
}
#arr span {
宽度：40px
高度：40px
位置：绝对；
左：5px
top:50%；
边距-顶部：-20px；
背景：# 000;
光标：指针；
行高：40px
文本对齐：居中；
字体粗细：粗体；
字体系列： '黑体；
字体大小：30px
颜色：# fff
不透明度：0.3;
边框：1px固体# fff
}
#arr #right {
右：5px
左：自动；
}
/风格
/头
身体
div class='all' id='box '
div class='screen '
！-无序列表-
保险商实验所
liimg src=' ./wf1。jpg ' width=' 500 ' height=' 200 '//Li
liimg src=' ./wf2。jpg ' width=' 500 ' height=' 200 '//Li
liimg src=' ./wf3。jpg ' width=' 500 ' height=' 200 '//Li
liimg src=' ./wf4。jpg ' width=' 500 ' height=' 200 '//Li
liimg src=' ./wf5。jpg ' width=' 500 ' height=' 200 '//Li
/ul
！-有序列表-
开环（同开环)
/ol
/div
div id='arr'span id='left'lt ./spanspan id='right'gt ./span/div
/div
脚本
//进行位置动画封装调用
函数动画（元素、偏移、设定值、时间){
//判断为真实的则删除，防止多个触发
if(element.jsq){
clearInterval(element.jsq)
}
//获取当前抵消
var position=ul.offsetLeft
//判定如果移动位置小于现在的位置，则步长为负数
if(offsetposition){
设定值=-设定值
}
//开启间隙定时器
if(Math.abs(位置偏移)Math.abs(设定)){
element.jsq=setInterval(()={
位置=设定值
元素。风格。左侧=位置px '
//判断要是现在的位值和预订的位置相差不超过一步长，则停止计时器
if(Math.abs(位置偏移)Math.abs(设定)){
clearInterval(element.jsq)
元素。风格。左侧=偏移量px '
}
},次);
}
}
//1.获取元素
var ul=文档。查询选择器(“ul”)
var ol=文档。查询选择器(' ol ')
var nth=文档。查询选择器(# arr)
var box=文档。查询选择器(#框)
var left=文档。查询选择器(#左侧)
var right=文档。查询选择器(#右)
//2.ol中添加点击元素
//在开环（同开环)循环添加里
for(var I=0；iul。孩子。长度；i ){
var Li=文档。createelement(' Li ')
li.innerHTML=i 1
//给每一个里设置上自定义属性
li.setAttribute('a '，I)
ol.appendChild(李)
//给开环（同开环)下面每一个里设置点击事件
ol .儿童[i].onclick=function(){
//循环所以里进行排他思想
for(var I=0；iol .儿童。长度；i ){
ol .儿童[i].className=' '
}
//给当前点击的元素添加上班级属性
"当前"
//获取到当前点击里的自定属性的值看看是点击到第几张
var index=this.getAttribute('a ')
console.log(索引)
//查看照片每一张的宽度
var imgwidth=ul.children[0].偏移距离
//根据宽度乘上第几张得出该移动多少
offset=index*-imgwidth
//调用动画函数
动画(ul，偏移，50,30)
//点击事件，索引为当前点击的序号的自定义类名的值
left.onclick=function(){
if(index0){
索引-
}
ol.children[index].单击()
}
right.onclick=function(){
if(index4){
指数
}
ol.children[index].单击()
}
}
}
//鼠标进入事件
box.onmousemove=function(){
nth.style.display='block '
}
//鼠标离开事件
box.onmouseleave=function(){
nth.style.display='none '
}
//鼠标右边点击事件
var Click=0
right.onclick=function(){
点击
if(Click==1){
儿童[1].单击()
}
}
//自动移动
//1.首先我们要在一开始的时候给第一个按钮添加颜色
ol.children[0].'当前'
//2.开启计时器每5秒切换一次
setInterval(function(){
var position=ul.offsetLeft
var imgwidth=ul.children[0].偏移距离
var indexs=数学。ABS(位置/图像宽度)
//3.获取现在的位置，和图片的长度，相除得到下标
if(索引3){
指数=-1
}
儿童.单击()
//跳转的时候一定要加一
},5000)
/脚本
/body
/html
记得更改图片的路径。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。