JS原生实现轮播图的几种方法
轮播图
主要思想就是：
在大的容器里，装着一个很长的表，表是容器宽度的整数倍。
然后通过更改列表样式里的left属性来实现左右滑动。
本文旨在控制滑动五张图片，但在html中使用了七张图片，第一张和最后一张是有重复的，至于原因会在下面解释。
通过给容器设定overflow:hidden属性来保证只显示容器视口大小的一张图片。
<body> <div id="container"> /*容器*/ <div id="wrap" style="left: -400px;"> /*存放图片的列表*/ <div class="item item5">l5</div> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item1">r1</div> </div> </div> <div id="key"> /*设置按钮*/ <div id="list"> /*点击小圆圈切换到固定图片*/ <div class="btn1 btnNum">1</div> <div class="btn2 btnNum">2</div> <div class="btn3 btnNum">3</div> <div class="btn4 btnNum">4</div> <div class="btn5 btnNum">5</div> </div> <div id="btn"> /*向左切换和向右切换的按钮*/ <button class="left">←</button> <button class="right">→</button> </div> </div> </body>
CSS：
可以给wrap列表设置flex属性，让图片在一行显示。其他布局可以按自己需求来做。
注意在定义id="wrap"d的节点中设置了内联样式left。因为在切换图片的时候我用到的是left属性，而如果不设置left的话，在DOM设置style时是找不到left属性的。
<style>
#container {
width: 400px;
height: 300px;
border: 8px rgb(8, 8, 8) solid;
margin: 0 auto;
margin-top: 150px;
overflow: hidden;
position: relative;
}
#wrap {
width: 2800px;
height: 300px;
display: flex;
position: relative;
}
.item {
flex: 1;
width: 400px;
height: 300px;
}
.item1 {
background-color: rosybrown;
}
.item2 {
background-color: rgb(12, 226, 37);
}
.item3 {
background-color: rgb(212, 221, 29);
}
.item4 {
background-color: rgb(61, 27, 182);
}
.item5 {
background-color: rgb(221, 23, 145);
}
#key {
width: 400px;
height: 300px;
margin: 0 auto;
}
#list {
width: 400px;
height: 40px;
display: flex;
justify-content: center;
}
#list div {
margin-top: 10px;
margin-left: 10px;
width: 20px;
height: 20px;
background-color: rgb(13, 162, 221);
text-align: center;
border-radius: 45%;
opacity: 0.6;
}
#list div:hover {
cursor: pointer;
opacity: 1;
}
#btn {
width: 400px;
text-align: center;
}
</style>
这是完整的样式
每种颜色代表一张图片，且按序标了序号。起始位置是第二张图片。
至于为什么第一张和最后一张有额外重复的一张放在两端，是为了在做滑动效果的时候，最后一张（倒数第二张，粉紫色）可以继续向右顺滑的滑到第一张（其实是本图的第二张，浅棕色的）。第一张（本图第二张，浅棕色）向左滑动时可以顺滑的滑到最后一张（实则倒数第二张）。继续往下看。
1. 多种轮播方式
轮播必然离开不了定位，以及修改wrap列表的left属性，使其移动。
先初始化几个数据
var wrap = document.getElementById('wrap');
var nowleft = -400; //用于存放当前列表的left的值
var currIndex = 1; //用于存放当前是第几个图片
//定位到几个按钮
var btnNum = document.getElementsByClassName('btnNum'); //小圆圈
var right = document.getElementsByClassName('right')[0]; //向右滑的按钮
var left = document.getElementsByClassName('left')[0]; //向左滑的按钮
1.1 定时自动轮播效果
只讲向左自动滑动的效果
既然是自动轮播的，那必然少不了setInterval()定时器让其持续轮播。
function next() {
setInterval(function() { //设置每两秒切换一次图片
wrap.style.transition = 'left 1s' //设定有过渡滑动的效果
nowleft = parseInt(wrap.style.left) - 400; //切换一次后nowleft应该减少（即向左滑）一个图片的宽度
wrap.style.left = nowleft + 'px'; //然后将nowleft赋值给wrap的left属性
if(parseInt(wrap.style.left) == -2400) { //判断到最后一个后，偷偷变回到最开头的位置
setTimeout(() => {
wrap.style.transition = 'none' //因为是偷偷变回去，所以要取消过渡效果
nowleft = -400;
wrap.style.left = nowleft + 'px'
},1200) //保证定时器的时间大于过度的时间且小于每次轮换的时间
}
},2000)
}
/由于wrap.style.left 返回的是带px的字符串，所以用parseInt可以取得前面的数值/
1.2 按向右滑动按钮
right.addEventListener('click',function() {
if(nowleft >= -2000){ //判断是否到最后一个图了，没有的话就开始滑动
nowleft -= 400;
wrap.style.transition = 'left 1s';
wrap.style.left = nowleft + 'px';
}
if(nowleft == -2400) { //如果到最后一个图了，就偷偷换回第一张图
setTimeout(() => {
wrap.style.transition = 'none';
nowleft = -400;
wrap.style.left = nowleft + 'px';
},1020)
}
})
1.3 小圆圈切换图片
for(let i = 0; i < btnNum.length; i++) {
btnNum[0].style.opacity = 1;
btnNum[i].addEventListener('click',function() {
wrap.style.transition = 'left 1s';
for(let j = 0; j < btnNum.length; j++) {
btnNum[j].style.opacity = '0.6';
}
btnNum[i].style.opacity = 1;
nowleft = nowleft - (i+1 - currIndex)*400;
currIndex = i + 1;
wrap.style.left = nowleft + 'px';
})
其实本文在控制从最后一个图偷偷换回第一张图的操作是有缺陷的，因为要把控序号5的图滑动到序号为r1的图是需要1s的，然而wrap.style.left是直接发生变化的，不会随着过渡期间发生位移而left一直变化。所以把控序号5完整滑动到r1后再偷偷切换到序号1的时间是有些难控制的。
而且比如从序号1连续点击3下是可以切换到序号4的。然是从序号5连续点击3下是不可以的，在r1切换到序号1的时候是无法响应点击效果的，因此此处交互差异会容易感到别扭。
如果想改善这个别扭的bug，可以用下防抖来改善。
到此这篇关于JS原生实现轮播图的几种方法的文章就介绍到这了,更多相关JS原生轮播图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS轮播图的实现方法2
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下 需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图 效果图: ![轮播图] 思路: 将所有需要轮播的图片横向排列,可视区大小设置为只能显示一张图片,给容器设置移出隐藏后,可视区之外的部分被隐藏,这样我们就只能看见一张图片. 轮播实现是改变整个图片画幅的left值或者margin-left 值,当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张. 后面功能实现顺序依旧是写法一里的思路. 戳!写法一地址
-
js轮播图无缝滚动效果
在做轮播图时如果首尾不能连起来的话,效果会有点丑,下面介绍一种我常用的方法: 先文字说明一下: 如果要展示5张图,分别为1,2,3,4,5 那么在代码的引入中是这样的:1,2,3,4,5,1 按顺序的轮播在此就不多说,重点说的是5>1和1>5的轮播 i 表示当前图片的索引 pre 表示上一张图片的按钮 next 表示下一张图片的按钮 ul 表示图片列表 (1) 5>1>2... 当"next"按钮从5到1时按顺序正常轮播,当前图片为第二个"1
-
JS原生轮播图的简单实现(推荐)
哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: *{ padding: 0px; margin: 0px; } img{ width: 500px; height: 300px; } li{ float: left; } ul{ width: 2000px; list-style: none; position: absolute; } div{ width: 500px; height: 30
-
JS轮播图实现简单代码
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
-
js轮播图之旋转木马效果
本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下 思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换 左旋转:将数组第一个数据删除,然后添加到数组的最后 右旋转:将数组最后一个数据删除,然后添加到数组的开头 先附上效果图,再来实现 接下来就是最主要的,封装原生js动画函数 //封装函数获取任意一个元素的任意属性的值(兼容ie8) function getStyle(element, attr) { return window.getComputedStyl
-
JS轮播图的实现方法
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下 需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图 效果图: 思路 通过编写过渡动画实现轮播效果,图片的出现动画以及移出动画.显示区的图片移出,切换的图进入分别调用动画,程序关键点:哪张图应该进入,哪张图应该移出. 轮播分为三部分: 自动轮播,左右箭头翻图,底部小圆点点击翻图. 编写程序顺序: 1. 小圆点点击 为什么先做小圆点呢?做小圆点点击功能时,我们能够清晰的知道哪张图片应该切换过来,哪张图片应该移
-
简单的JS轮播图代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过
-
JS原生实现轮播图的几种方法
轮播图 主要思想就是: 在大的容器里,装着一个很长的表,表是容器宽度的整数倍. 然后通过更改列表样式里的left属性来实现左右滑动. 本文旨在控制滑动五张图片,但在html中使用了七张图片,第一张和最后一张是有重复的,至于原因会在下面解释. 通过给容器设定overflow:hidden属性来保证只显示容器视口大小的一张图片. <body> <div id="container"> /*容器*/ <div id="wrap" style=
-
原生JS实现的轮播图功能详解
本文实例讲述了原生JS实现的轮播图功能.分享给大家供大家参考,具体如下: 一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2..prev存放向左的箭头,.next存放向右的箭头: 3.pointer意为指示器,存放下方的五个切换按钮,每个切换按钮用span来表示: 4..m-view,意为视窗,即每次看到图片的窗口,它存放以上所有的部件: (二)CS
-
原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到最后一张时,将ul的left值设为0,即可达到图片无线轮播的效果. 运动函数的实现 函数需传入元素(即需要参与运动的元素).目标值(以对象的形式呈现,如{left: 300}).callback(回调函数). //多物体多值运动+回调机制 function startMove(dom, attrOb
-
原生JS实现呼吸轮播图
今天给大家分享一个用原生JS实现的呼吸轮播图,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生JS实现呼吸轮播图</title> <style> ul { margin: 0; padding-left: 0; } li { list-style: none; } img {
-
原生js实现无缝轮播图
本文实例为大家分享了js实现无缝轮播图的具体代码,供大家参考,具体内容如下 先上效果图 原理图 如图可见,是页面按顺序依次显示5张图片,包裹这五张图片的外层的盒子,我们叫ul,通过向左或右移动不同距离,实现在视图中显示的不同的图片,实现轮播,而同时下面的分页小球需要根据当前显示的内容进行点亮: 而无缝轮播图需要在第五张图片后面再加上第一张图片,这样通过右侧箭头,向右切换,当页面切换到第六张时,也就是最后一张图片,此时需要将ul的位置设置为第一张图的位置,然后从第一张图片滑动到第二张,形成一个无缝
-
原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下 一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: 初始化: 包括外边距margin.内边距padding.链接a.图片img.输入框input.列表ul.li.网页html.body一系列初始化 css设置: 根据图片数与图片宽度设置轮播图宽度 二.设置js逻辑 需要完成的功能有: 1.鼠标移入轮播图逐渐出现左右浮动块 2.点击浮动块切换图片 3
-
原生js实现简单轮播图效果
本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下 效果如下: 分析: 分析效果: 分析实现: 1.通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel).装轮播图左右按钮的标签的父元素(.chevron).获取左右按钮(.chevron-left ..chevron-right).获取放轮播图图片的父元素ul(.carousel-body)[注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul
-
js实现左右轮播图
本文实例为大家分享了js实现左右轮播图的具体代码,供大家参考,具体内容如下 我的轮播图功能有:自动播放.点击焦点切换和点击左右按钮切换 效果图: 自动轮播 点击焦点切换 点击左右按钮切换 注意:本文用带背景颜色的li标签指代图片,有需要的话可以将图片插入li标签内 思路: 基础布局和css样式 (1) 给盛放要轮播的图片的盒子绝对定位 js中的代码 (2) 复制第一张图片放在盒子最后,复制最后一张图片放在盒子最前,以保证轮播图左右滑动效果(否则看起来会有一点卡顿) (3)设置盒子位置,通过移动这
-
js实现无缝轮播图特效
用原生js实现无缝轮播图,供大家参考,具体内容如下 index.js: var config = { imgWidth:380,//图片尺寸 dotWidth:8,//小圆点尺寸 doms:{ divImgs:document.querySelector('.imgs'), divDots:document.querySelector('.circle'), divDirection:document.querySelector('.direction'), divContainer:docum
-
JS实现小米轮播图
原生JS仿小米轮播图(最新版易懂),供大家参考,具体内容如下 本次内容主要可实现的效果: 自动轮播 可点击上一张 下一张进行图片的切换 点击右下方小圆点进行图片切换 代码部分: H5: <div class="wrap"> <ul class="list"> <li class="item active"><img src="img/001.jpg" alt=""&