前言：轮播图，是网站首页中最常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播，省事简单。所以我今天想介绍一下原生js代码实现的图片轮播。
结构部分
html部分
<body>
<!--展示窗口-->
<div class="show_box">
<!--轮播图图片-->
<div class="pic_box">
<div class="pic">
<img src="images/1.jpg" alt=""/>
</div>
<div class="pic">
<img src="images/2.jpg" alt=""/>
</div>
<div class="pic">
<img src="images/3.jpg" alt=""/>
</div>
<div class="pic">
<img src="images/4.jpg" alt=""/>
</div>
<div class="pic">
<img src="images/5.jpg" alt=""/>
</div>
<div class="pic">
<img src="images/6.jpg" alt=""/>
</div>
<div class="pic">
<img src="images/1.jpg" alt=""/>
</div>
<div class="pic">
<img src="images/2.jpg" alt=""/>
</div>
<div class="pic">
<img src="images/3.jpg" alt=""/>
</div>
</div>
<!-- 轮播左侧按钮-->
<div class="leftBtn btn"><</div>
<!-- 轮播右侧按钮-->
<div class="rightBtn btn">></div>
</div>
</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();总结
就这样一个简单的无缝滚动就这样实现了！
主要逻辑点：无缝滚动的原理，①结构处负责前几个图片到尾部②轮播到首尾部时的闪现和动画函数的处理。
以上就是这篇文章的所有内容了，希望本文对大家的学习或工作上能带来一点帮助，如果有疑问，大家可以留言交流；小编水平有限，还请各位同行前辈多多斧正。