原生JS实现滑动轮播图

ningwang 发布于2019-08-30 15:43 / 1917人阅读

摘要：效果实现原理纯粹只使用了发现还是比较简单的，并不需要借助别的插件或类库来实现核心是把图片组合成一行序列，通过左右移动，以及父元素的来决定显示的图片简单画了一下搭建基本界面这里主要分成三个部分，两个向左向右的箭头，圆点序列，图片序列全

效果

实现原理

纯粹只使用了html+css+JS
发现还是比较简单的，并不需要借助别的插件或类库来实现
核心是把图片组合成一行序列，通过左右移动，以及父元素的overflow：hidden来决定显示的图片
简单画了一下：

搭建基本界面

这里主要分成三个部分，两个向左向右的箭头，圆点序列，图片序列
全部运用绝对定位对其布局，通过z-index确定他们的层叠关系
事先定义图片的宽度高度作为css变量，方便各元素计算确定高度宽度

    #box {
    position:relative;
    width:var(--imageWidth);
    height:var(--height);
    overflow: hidden;
    }
    #multi-circles {
    position:absolute;
    right:30px;
    bottom:10px;
    z-index: 2;
    }
    #multi-images {
    position:absolute;
    left:0;
    top:0;
    z-index: 1;
    width:calc(var(--imageWidth)*5);
    height:var(--height);
    }
    #arrow-right,
    #arrow-left {
    position: absolute;
    top:50%;
    margin-top:-20px;
    height:40px;
    z-index: 3;
    }
    #arrow-right {
    right:0;
    }
    #arrow-left {
    left:0;
    }

确定图片序号

为了实现轮播，我们得知道现在应该要显示哪一张图片
在js中定义变量currentIndex，表示当前显示图片的序号，初始为0
当点击箭头，或者鼠标移动到圆点上时，只要改变序号就可以了

//先dom操作，获取html组件
var arrowLeft = document.getElementById("arrow-left");
var arrowRight = document.getElementById("arrow-right");
var multiImages = document.getElementById("multi-images");
var circles = document.getElementById("multi-circles").getElementsByTagName("li");
var box=document.getElementById("box");

//为箭头和圆点绑定事件
arrowLeft.addEventListener("click", preMove);
arrowRight.addEventListener("click", nextMove);
for (let i = 0; i < circles.length; i++) {
        circles[i].setAttribute("id", i);
        circles[i].addEventListener("mouseenter", overCircle);
}

//滑过圆点
function overCircle() {
    currentIndex = parseInt(this.id);
}
//左箭头
function preMove() {
    if (currentIndex != 0) {
        currentIndex--;
    }
    else {
        currentIndex = 4;
    }
}
//右箭头
function nextMove() {
    if (currentIndex != 4) {
        currentIndex++;
    }
    else {
        currentIndex = 0;
    }
}

滑动

现在我们已经知道了现在应该显示哪一张图片，那要怎么显示呢？
上面我们已经说过了滑动的原理是改变图片序列的位置，左右移动
加上父元素的overflow：hidden来只显示对应图片
于是只要写这样一个函数，加到之前的事件里

function moveImage() {
    multiImages.style.left = -currentIndex * 400 + "px";
}

这样是生硬的跳动，为了实现滑动
网上有自己编写animate函数，或者用jquery的函数的方法
这里我想到了直接用css3的transition属性
只要在图片序列的css类下加一句

#multi-images {
     transition: 1s;
}

就可以实现自然的滑动

圆点颜色

我们希望当显示图片的时候，对应圆点的颜色可以变为红色
把现在的圆点变色很简单，只要currentIndex这一个变量就可以帮助实现
但还要把前一个显示的圆点变回白色
诚然，可以先用一个for循环，把所有圆点都变成白色
但这样就出现了多余的工作，我们明明只要变一个圆点的颜色就好
于是新定义一个变量preIndex，记录前一个显示的图片
只要在先前绑定的事件函数中，第一句先令preIndex=currentIndex
就在图片序号改变前保存到了前一个序号
然后在事件末尾添加这样一个函数

function changeCircleColor(preIndex, currentIndex) {
    circles[preIndex].style.backgroundColor = "rgb(240, 240, 240)";
    circles[currentIndex].style.backgroundColor = "rgb(245, 40, 40)";
}

悬浮箭头

我们希望当鼠标放到轮播图上时，左右箭头才显示
于是先让箭头的display为none

#arrow-right,
#arrow-left {
display:none;
}

给box添加mouseover事件

box.addEventListener("mouseover",function() {
    arrowLeft.style.display="block";
    arrowRight.style.display="block";
});

鼠标放到箭头上时，鼠标变成点击样式

#arrow-right,
#arrow-left {
cursor:pointer;
}

自动轮播

目前为止已经完成了基本的工作
不过我们还希望它可以自动轮播
当鼠标放到轮播图上时，轮播暂停
于是我们建立一个定时器
当鼠标放到box上，清除定时器，离开则重新建立

timer=setInterval(nextMove,2000);
box.addEventListener("mouseover",function() {
    clearInterval(timer);
});
box.addEventListener("mouseout",function() {
    timer=setInterval(nextMove,2000);
});

小插曲

在制作的时候，还遇到了一个很奇怪的bug
是鼠标移动到圆点的左边一点点时，也会触发事件变色
后来换了浅色背景，才发现是因为

的默认样式
圆点的左边还有一个很小的圆点

去除这个样式即可

ul,
li {
    list-style: none;
}

完整代码

代码地址:https://github.com/ssevenk/Ca...

云服务器 GPU云服务器滑动轮播 jquery滑动轮播原生js实现 ajax原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116031.html

原生JS实现滑动轮播图

摘要：效果实现原理纯粹只使用了发现还是比较简单的，并不需要借助别的插件或类库来实现核心是把图片组合成一行序列，通过左右移动，以及父元素的来决定显示的图片简单画了一下搭建基本界面这里主要分成三个部分，两个向左向右的箭头，圆点序列，图片序列全效果 showImg(https://segmentfault.com/img/bVbqHhE?w=479&h=235); 实现原理纯粹只使用了html...

techstay 2019-08-02 16:10 评论0 收藏0
原生JS实现滑动轮播图

摘要：效果实现原理纯粹只使用了发现还是比较简单的，并不需要借助别的插件或类库来实现核心是把图片组合成一行序列，通过左右移动，以及父元素的来决定显示的图片简单画了一下搭建基本界面这里主要分成三个部分，两个向左向右的箭头，圆点序列，图片序列全效果 showImg(https://segmentfault.com/img/bVbqHhE?w=479&h=235); 实现原理纯粹只使用了html...

Flands 2019-08-26 13:39 评论0 收藏0
用jq实现移动端滑动轮播以及定时轮播效果

摘要：的代码代码代码定义每次滑动的距离定义当前滑动的索引位置，轮播图的个数向左滑动执行的方法当轮播图滑动最后一个位置时，当前轮播图位置不变当轮播不在最后一个位置时，轮播图位置变化方法向右滑动 Html的代码： ...

rose 2019-08-19 17:38 评论0 收藏0
用jq实现移动端滑动轮播以及定时轮播效果

摘要：的代码代码代码定义每次滑动的距离定义当前滑动的索引位置，轮播图的个数向左滑动执行的方法当轮播图滑动最后一个位置时，当前轮播图位置不变当轮播不在最后一个位置时，轮播图位置变化方法向右滑动 Html的代码： ...

qylost 2019-08-30 12:46 评论0 收藏0
用jq实现移动端滑动轮播以及定时轮播效果

摘要：的代码代码代码定义每次滑动的距离定义当前滑动的索引位置，轮播图的个数向左滑动执行的方法当轮播图滑动最后一个位置时，当前轮播图位置不变当轮播不在最后一个位置时，轮播图位置变化方法向右滑动 Html的代码： ...

yanest 2019-08-01 15:03 评论0 收藏0