本文主要详细介绍JS实现轮播效果的三种简单方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享实现JS轮播效果的三种方法的具体代码，供大家参考。具体内容如下
Js实现轮播图01
实现思路
这可能是轮播图像最简单的实现之一。要达到这种效果，我们首先需要统一pic01.jpg、pic02.jpg等形象命名格式。然后用js timer改变img标签中src图片链接的名称，达到切换效果。代码如下：
实现效果
！文档类型html
超文本标记语言
头
meta charset='utf-8 '
标题轮播实现01/标题
style type='text/css '。伦博{
宽度：900px
高度：400px
边距：100px自动；
}。lunbo img{
宽度：100%；
身高：100%；
}
/风格
/头
身体
！-旋转图模块-
div class='lunbo '
img id='lunbo_img' src='。/pic/img3.jpeg '
/div
！- Js代码-
脚本
var指数=1；
函数lunbo(){
指数；
//确定索引是否大于3
if(索引3){
指数=1；
}
//获取img对象
var img=document . getelementbyid(' lunbo _ img ')；
img.src='。/pic/img' index '。JPEG’；
}
//2.定义计时器
setInterval(伦博，2000)；
/*记住在timer中调用lunbo方法时不能加()，setInterval(lunbo，2000)；如果添加()，将执行lunbo()方法，计时器将没有用。
/脚本
/body
/html
Js实现轮播图02
实现思路
这可能是carousel最简单的实现之一。要达到这种效果，我们需要统一pic01.jpg、pic02.jpg等形象命名格式。通过改变背景图片链接，然后使用js timer改变背景属性中的url()图片链接名称来实现切换效果。代码如下：
实现效果
！文档类型html
超文本标记语言
头
meta charset='utf-8 '
标题轮播实现02/标题
风格
正文{
边距：0；
填充：0；
}。伦博{
宽度：100%；
高度：720px
背景-图片：URL(pic/img 1 . JPEG)；/*背景图片*/
背景尺寸：100% 100%；
}
/风格
/头
身体
div class='lunbo '
/div
脚本类型='文本/javascript '
var指数=1；
函数lunbo(){
指数；
//确定数字是否大于3
if(索引3){
指数=1；
}
//获取img对象
var img=document . getelementsbyclassname(' lunbo ')[0]；
img . style . background=' URL(pic/img ' index ')。JPEG)’；
img . style . background size=' 100% 100% '；
}
//2.定义计时器
setInterval(伦博，3000)；
/脚本
/body
/html
Js实现轮播图03
要实现这一轮的图片播放，首先通过CSS代码将opacity属性设置为0，将所有存储图片的li标签隐藏不显示，并通过js代码不断调用active类高亮li标签，同时隐藏同级li标签。然后通过索引达到切换循环显示的效果。当你点击两边的按钮时，调用index所在的方法来实现切换效果。没有复杂的算法，一点点看代码就能学会。请参考。
实现效果
HTML代码
！文档类型html
超文本标记语言
头
meta charset='utf-8 '
meta name=' viewport ' content=' width=设备宽度，initial-scale=1，
最小规模=1，最大规模=1，用户可扩展=否'/
！-介绍CSS代码-
link rel=' style sheet ' type=' text/CSS ' href='。/css/index.css' /
！-介绍Js代码-
脚本src='。/js/index.js'/script
Js实现轮播图/titleJs
/头
身体
div class='lunbo '
div class='内容'
ul id='item '
李
a href=' # ' img src=' img/pic 1 . jpg '/a
/李
李
a href=' # ' img src=' img/pic 2 . jpg '/a
/李
李
a href=' # ' img src=' img/pic 3 . jpg '/a
/李
李
a href=' # ' img src=' img/pic 4 . jpg '/a
/李
李
a href=' # ' img src=' img/pic 5 . jpg '/a
/李
/ul
div id='btn-left'/div
div id='btn-right'/div
ul id='circle '
李
李
李
李
李
/ul
/div
/div
/body
/html
半铸钢钢性铸铁(铸造半钢)代码
*{
边距：0;
填充：0;
}
一个{
列表样式：无；
}
李{
列表样式：无；
}。伦博{
宽度：100%;
}。内容{
宽度：800像素
高度：300像素
边距：20px自动；
位置：相对；
}
#item{
宽度：100%;
身高：100%;
}。项目{
位置：绝对；
不透明度：0;
过渡：全1;
}。item.active{
不透明度：1;
}
img{
宽度：100%;
}
# BTN-左侧{
宽度：30px
高度：69px
字体大小：30px
颜色：白色；
背景色：rgba(0，0，0，0.4)；
行高：69px
左填充：5px
z指数：10;/*始终显示在图片的上层*/
位置：绝对；
左：0;
top:50%；
transform:平移y(-60%)；/*使按钮向上偏移居中对齐*/
光标：指针；
不透明度：0;/*平时隐藏*/
}。lunbo:hover #btn-left{
/*鼠标滑入，显示图标*/
不透明度：1;
}
# BTN-右{
宽度：26px
高度：69px
字体大小：30px
颜色：白色；
背景色：rgba(0，0，0，0.4)；
行高：69px
左填充：5px
z指数：10;
位置：绝对；
右：0;
top:50%；
光标：指针；
不透明度：0;
transform:平移y(-60%)；
}。lunbo:hover #btn-right{
不透明度：1;
}
#圆圈{
高度：20px
显示器：flex
位置：绝对；
底部：35px
右：25px
}。圆圈{
宽度：10px
高度：10px
边框半径：10px
边框：2px纯白；
背景：rgba(0，0，0，0.4)；
光标：指针；
保证金：5px
}。白色{
背景色：# FFFFFF
}
射流研究…代码
window.onload=function(){
var items=文档。getelementsbyclassname(' item ')；
var circles=文档。getelementsbyclassname(' circle ')；
var左BTN=文档。getelementbyid(“BTN-左”)；
var右BTN=文档。getelementbyid(' BTN-右')；
var内容=文档。查询选择器(.内容');
定义变量指数=0;
var timer=null
//清除班级
var clearclass=function(){
对于(设I=0；items.lengthi ){
项目[我].项目
圆圈[我].圆圈'；
圆圈[我].setAttribute('num '，I)；
}
}
/*只显示一个类别*/
函数move(){
clear class()；
项目[索引]。项目活动
圆圈[索引]。'圆圈白色；
}
//点击右边按钮切换下一张图片
rightBtn.onclick=function(){
if(indexitems.length-1){
指数；
}
否则{
索引=0;
}
move()；
}
//点击左边按钮切换上一张图片
leftBtn.onclick=function(){
if(indexitems.length){
索引-;
}
否则{
索引=项目。长度-1；
}
move()；
}
//开始定时器，点击右边按钮，实现轮播
timer=setInterval(function(){
好的BTN。onclick()；
},1500)
//点击圆点时，跳转到对应图片
for(var I=0；icircles.lengthi)
圆圈[我].addEventListener('click '，function(){
var point _ index=this。get attribute(“num”)；
索引=点_索引；
move()；
})
}
//鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
内容。onmouseover=function(){
间隙(定时器);
timer=setInterval(function(){
好的BTN。onclick()；
},3000)
}
//鼠标移出又开启定时器
内容。onmouse leave=function(){
间隙(定时器);
timer=setInterval(function(){
好的BTN。onclick()；
},1500)
}
}
代码可能写的不是很好，存在很多不足，欢迎大家指点批评，我会努力去改正，有疑问欢迎留言，我会尽力去解答，谢谢大家花宝贵的时间来阅读这篇文章。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。