原生JS实现滑动轮播图

更新日期: 2019-01-29阅读: 6.7k标签: 轮播

效果



实现原理

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


搭建基本界面

<div id="box">
            <img src="images/arrowleft.png" id="arrow-left">
            <img src="images/arrowright.png" id="arrow-right">
            <ul id="multi-circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="multi-images">
                <img src="images/1.jpg">
                <img src="images/2.jpg">
                <img src="images/3.jpg">
                <img src="images/4.jpg">
                <img src="images/5.jpg">
                <div class="clear"></div>
            </div>
        </div>

这里主要分成三个部分,两个向左向右的箭头,圆点序列,图片序列
全部运用绝对定位对其布局,通过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
是鼠标移动到圆点的左边一点点时,也会触发事件变色
后来换了浅色背景,才发现是因为<li>的默认样式
圆点的左边还有一个很小的圆点

去除这个样式即可

ul,
li {
    list-style: none;
}


完整代码

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

来自:https://segmentfault.com/a/1190000018718279


链接: https://www.fly63.com/article/detial/2643

vue轮播图_用vue实现一个仿简书的轮播图

Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果。写好css样式,只需改变每张图片的class即可实现轮播效果。可以将轮播图看成两个,如图所示

swiper在angular.js中使用循环轮播失效的解决方法总汇

我们在anjular.js 中使用了swiper轮播图,把json数据放入swiper-slide中,容易出现swiper循环轮播失效的问题,就此整理一些此问题的解决方法

原生 js 实现移动端 Touch 轮播图

touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下。结构上,还是用ul、li来存放轮播图片,ol、li来存放轮播小圆点:

使用backgroundImage解决图片轮播切换

利用backgroundImage可以添加多张图片,以及位置偏移实现轮播效果:创建一个div;并用backgroundImage给div附图片;利用backgroundPosition调节位置;利用css3 transition调节过渡

jquery轮播图的实现

今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相应位置,首先书写的div部分;然后书写style样式部分

js无缝轮播的实现思路

最简单的点击按钮切换图片很简单,给按钮添加click事件监听,改变图片的translateX。当然如果想要轮播图从上到下播放,相应的改变translateY就行。

swiper在tab切换的时候,swiper不生效,当display:none 后 再次显示 无法自动滑动问题解决方案

当你兴高采烈的写完一个tab,并且把swiper嵌入到每一个tab item 觉得大功告成的时候,你会发现,永远只有第一个tab上的swiper生效了,其余的不管你怎么切换,swiper总是初始化失败,是的,就是不能愉快的滚动了~

原生js实现轮播图实例教程

轮播图是前端最基本、最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果。本教程讲解怎么实现一个简单的轮播图效果。

两种轮播图实现方式

首页轮播图一直没有达到理想的效果,在网上找了两个实现方法,一个是用css自己实现,一个是用swiper插件,个人认为swiper做的还比较好用。这里只贴出主要的实现代码,想要看具体实现代码及效果可以到对应网址上看:

原生Js 实现的简单无缝滚动轮播图

简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!