本文实例讲述了原生JS实现的轮播图功能。分享给大家供大家参考,具体如下:
由于只能上传2 m以下的图片,这里只截取了自动切换的效果:
HTML, CSS,原生JS
<强>(一)HTML部分
, <代码> .slide 意为滑槽,里面存放所有图片;
2, <代码> .prev>
3 <代码> 指针意为指示器,存放下方的五个切换按钮,每个切换按钮用跨度来表示,
, <代码> .m-view>
<强>(二)CSS部分
, <代码> .m-view 设为相对定位,他的后代元素可以以它作为绝对定位的参照;
2, <代码> .slide ,<代码> .prev ,<代码> . next ,<代码> 全指针都用绝对定位放到合适位置;
3 <代码> .slide> .m-view> .slide> .m-view 设置<代码>溢出:隐藏>
<强>(三)JS部分
1,切换功能:
设置一个切换函数切换实现左切或者右切一张图,开关有两个子函数和分别实现向,左向右切换一张图,将他们分别绑定到<代码> .prev 和<代码> . next>
2,切换功能的淡入动画效果
只有1的话切换是立即产生的,没有过渡效果;这里利用定时器和步长将切换功能细化到更小的滑动操作和,和通过多次调用滑动操作来实现一次切换,这样就会产生动画效果;
3,跳转功能
对指示器的每个圆形按钮绑定跳转功能,跳转实际上是将.slide进行移动;
4,自动播放
只需要设置定时器,每隔一定时间执行切换即可。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>轮播图& lt;/title>
& lt; style>
.m-view。m-view .slide img {
位置:相对,/*作为绝对定位的父元素*/宽度:800 px;
身高:600 px;
}
.m-view {
溢出:隐藏;/*将超出该div的子元素隐藏*/}
.m-view .slide {
位置:绝对的;
宽度:8000 px;
身高:600 px;
}
.m-view .slide img {
margin-right: 5 px;
}
.m-view .prev。m-view第二{
位置:绝对的;
上图:40%;
字体:60 px/60 px微软YaHei;
颜色:# 00 bfff;
}
.m-view .prev {
左:10 px;
}
.m-view第二{
右:10 px;
}
.m-view .pointer {
位置:绝对的;
底部:40像素;
左:33%;
}
.m-view .pointer跨度{
显示:inline-block;/*水平排列*/宽度:40像素;
高度:40像素;
border - radius: 20 px;
margin-right: 10 px;
background - color: # 00 ff00;
}
.m-view .pointer碧绿{/*点亮当前图片对应的圆圈*/background - color: # 1 e90ff;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癿-view”比;
& lt; div类=盎玫破北?
& lt; img src=" https://www.yisu.com/lunbo/5.jpg " alt=?”比;
& lt; img src=" https://www.yisu.com/lunbo/1.jpg " alt=" 0 "比;
& lt; img src=" https://www.yisu.com/lunbo/2.jpg " alt=" 1 "比;
& lt; img src=" https://www.yisu.com/lunbo/3.jpg " alt=?”比;
& lt; img src=" https://www.yisu.com/lunbo/4.jpg " alt=?”比;
& lt; img src=" https://www.yisu.com/lunbo/5.jpg " alt=?”比;
& lt; img src=" https://www.yisu.com/lunbo/1.jpg " alt=" 0 "比;
& lt;/div>
& lt; div类="上一页"祝辞,lt; & lt;/div>
& lt; div类=跋乱桓觥弊４?gt; & lt;/div>
& lt; div类=爸刚搿北?
& lt;跨类=" button> & lt;/span>
& lt;跨类=鞍磁ァ敝甘??”祝辞& lt;/span>
& lt;跨类=鞍磁ァ敝甘??”祝辞& lt;/span>
& lt;跨类=鞍磁ァ敝甘??”祝辞& lt;/span>
& lt;跨类=鞍磁ァ敝甘??”祝辞& lt;/span>
& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var=document.getElementsByClassName视图(“m-view”) [0];
var=document.getElementsByClassName滑动(“幻灯片”)[0];
var prev=document.getElementsByClassName(“上一页”)[0];
接下来var=document.getElementsByClassName (“next”) [0];
var=document.getElementsByClassName按钮(按钮);
var curIndex=0;//当前图片的索引位置
并且var=true;//是否正在切换,真表明切换已完成,此时才能切换/*切换函数实现切换一张图片的功能*/函数切换(){
var计时器=50;//滑动一次所用的时间,它是setInterval的第二个参数
var=800;//每切换一张图片总共用的时长
var=时间/计时器;//每切换一张图片需滑动的次数
var stepLenth=800/次;//每次滑动的步长
var leftToggle=function () {
var t1=*;
函数leftStep () {
slide.style.left=方法(slide.style.left) + stepLenth +“px”;
t1 -;
如果(t1) {
clearInterval(间隔);
curIndex——;
如果(curIndex
