原生js实现轮播图之无缝滚动代码实现教程
程序员文章站
2022-05-11 07:57:52
前言：轮播图，是网站首页中最常见的一种图片切换特效，作为者，我相信很多开发者都直接调用了jquery中的封装好的方法实现图片轮播，省事简单。所以我今天想介绍一下原生js代码实现的图...
前言：轮播图，是网站首页中最常见的一种图片切换特效，作为者，我相信很多开发者都直接调用了jquery中的封装好的方法实现图片轮播，省事简单。所以我今天想介绍一下原生js代码实现的图片轮播。
结构部分
html部分
<body>
<!--展示窗口-->
<p class="show_box">
<!--轮播图图片-->
<p class="pic_box">
<p class="pic">
<img src="images/1.jpg" alt=""/>
</p>
<p class="pic">
<img src="images/2.jpg" alt=""/>
</p>
<p class="pic">
<img src="images/3.jpg" alt=""/>
</p>
<p class="pic">
<img src="images/4.jpg" alt=""/>
</p>
<p class="pic">
<img src="images/5.jpg" alt=""/>
</p>
<p class="pic">
<img src="images/6.jpg" alt=""/>
</p>
<p class="pic">
<img src="images/1.jpg" alt=""/>
</p>
<p class="pic">
<img src="images/2.jpg" alt=""/>
</p>
<p class="pic">
<img src="images/3.jpg" alt=""/>
</p>
</p>
<!-- 轮播左侧按钮-->
<p class="leftbtn btn"><</p>
<!-- 轮播右侧按钮-->
<p class="rightbtn btn">></p>
</p>
</body>
css部分
<style>
* {
margin: 0;
padding: 0;
}
.show_box {
margin: 100px auto;
height: 300px;
width: 900px;
position: relative;
border: 10px dotted blue;
overflow: hidden;
}
.pic_box {
position: absolute;
width: 3600px;
}
.pic {
float: left;
}
.leftbtn,.rightbtn {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #333;
position: absolute;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 25px;
top: 50%;
margin-top: -25px;
cursor: pointer;
}
.leftbtn {
left: 10px;
}
.rightbtn {
right: 10px;
}
</style>
注：图片宽高都为300px
结构很简单，一个展示图片的大盒子(相对定位，设置overflow:hidden)，里面放存放图片的大盒子(绝对定位)，再里面：图片盒子左浮动，为了实现无缝轮播的效果，这里将前三个图片复制一份加到最后一个图片的后面。结构部分不设置溢出隐藏效果如下图:
js部分：
先传入上次教程封装好的动画函数
function getstylevalue(node,attr){
var stylenode;
if(node.currentstyle==undefined){
stylenode = getcomputedstyle(node,null);
}else{
stylenode = node.currentstyle;
}
return stylenode[attr];
}
function animate(node,obj,speed,fn){
clearinterval(node.num);
node.num = setinterval(function(){
var flag = true;
for(var key in obj){
var v = parseint(getstylevalue(node,key));
if(v!=obj[key]){
flag = false;
}
var step = (obj[key]-v)/20;
if(step>0){
step = math.ceil(step);
}else if(step<0){
step = math.floor(step);
}
var v2 = v + step;
node.style[key] = v2 + 'px';
}
if(flag){
clearinterval(node.num);
if(fn!=undefined){
fn();
}
}
},speed);
}
右按钮
尾部无缝原理图解
//用全局变量index接收当前的下标，后期如需做分页器更方便使用。
var index = 0;
//lock开关锁思想： 防止用户快速点击按钮，出现动画未结束就进行下一个动画，以致轮播出现混乱。
var lock = true;
rightbtnnode.onclick = function(){
if(lock){
lock = false;
index++;
var targetvalue = index * -300;
//用第三方变量temp接收index的值
var temp = index;
if(index==6){
index = 0;
}
animate(pic_boxnode,{left:targetvalue},10,function(){
if(temp==6){
//判断：当图片动画运动到最后尾部的时候，立马将图片不以动画的方式(闪现到开始位置。)
pic_boxnode.style.left = 0 + 'px';
}
//最后一步：将lock赋值true；将锁打开
lock = true;
});
}
};
左按钮
leftbtnnode.onclick = function(){
if(lock){
lock = false;
index--;
if(index<0){
index = 5;
//判断：当图片动画运动到最后头部开始位置的时候，立马将图片不以动画的方式(闪现到尾部最后的位置。)
pic_boxnode.style.left = 6 * -300 + 'px';
}
var targetvalue = index * -300;
var temp = index;
animate(pic_boxnode,{left:targetvalue},10,function(){
lock = true;
});
}
};
自动轮播功能实现
//下面为鼠标进出显示盒子设置是否自动播放
show_boxnode.onmouseenter = function(){
clearinterval(flag)
};
show_boxnode.onmouseleave = function(){
autoplay();
};
var flag;
function autoplay(){
flag = setinterval(function(){
rightbtnnode.onclick();
},2000);
}
autoplay();
总结
就这样一个简单的无缝滚动就这样实现了！
主要逻辑点：无缝滚动的原理，①结构处负责前几个图片到尾部②轮播到首尾部时的闪现和动画函数的处理。
以上就是这篇文章的所有内容了，希望本文对大家的学习或工作上能带来一点帮助，如果有疑问，大家可以留言交流；小编水平有限，还请各位同行前辈多多斧正。
上一篇： 快速将关键词送到搜索第一页的经验分享