用js实现点击切换+自动切换的轮播图

之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能。那么这些功能用js该如何实现呢？我们一起来看下吧！

(ps:博主在用js写轮播图的过程中,在网上查阅了很多篇文章,但是没有一篇是博主能彻底理解的[笨蛋QAQ]，所以这篇博客用来帮助像博主一样没有头绪,看不懂网上部分教程的伙伴)。

首先我们要明白轮播图的滑动原理,假设我们有装着3张图片的大盒子pic,那么我们可以采用定位或者浮动让这3张图片横向排成一排,那么大家想一想我们是不是移动大盒子的左/右边距就能显示出相应的图片呢？那么我们先来看一下代码

HTML:

    <div class="box"><!-- 图片 --><ul id="pic"><li class="pic_items">1</li><li class="pic_items">2</li><li class="pic_items">3</li></ul><!-- 左右箭头 --><span id="lf">左</span><span id="rt">右</span><!-- 圆点 --><ul id="cir"><li class="cir_items"></li><li class="cir_items"></li><li class="cir_items"></li></ul></div>

CSS:

 .box{overflow:hidden; width:940px;height:100%;margin:0 auto;     }#pic{width:2820px;height: 500px;}.pic_items{width:940px;height:100%;float:left;}.pic_items:nth-child(1){background:pink;}.pic_items:nth-child(2){background: gray;}.pic_items:nth-child(3){background:green;}

这样就完成了基本的轮播图布局,那么我们再给轮播图添加上圆点和左右切换按钮,一个静态样式的轮播图就完成了。（注意这里要给大盒子开启定位:position:relative;）

CSS

        .box{position:relative;overflow:hidden; width:940px;height:100%;margin:0 auto;     }/* 箭头 */span{position:absolute;width:50px;height:100px;background:black;color:#fff;text-align:center;line-height:100px;cursor: pointer;}#lf{left:0;top:50%;}#rt{right:0;top:50%;}/* 圆点 */#cir{position:absolute;bottom:20px;right:100px;width:100px;height:20px;}.cir_items{width:20px;height:20px;border-radius:10px;background:#fff;float: left;margin-right:10px;cursor: pointer;}

接下来就到了最重要的js部分，根据之前的思路,我们是不是只需要设置大盒子pic的距离,就可以实现相应图片的切换对吧.那么我们先写出这部分代码：

JS:

        // 获取图片idvar pic = document.getElementById('pic');var picItems = document.getElementsByClassName('pic_items');// 获取左右箭头idvar lf = document.getElementById('lf');var rt = document.getElementById('rt');// 获取圆点var cirItems = document.getElementsByClassName('cir_items');// 索引var index = 0;// 实现移动功能的函数function change(){  pic.style.marginLeft = -index*940+"px";}

这个时候我们去运行程序,发现没有什么效果,为什么呢，那么大家想一想,我们的图片是不是有3张啊,index表示的我们图片的索引。
从0开始。那么在以上的代码中是不是index=0；仅仅显示的是第一张图片。所以我们要想办法改变index的值,才能显示出我们想要显示的图片。我们可以给change（）函数传入的一个参数i，这个i就表示我们想要显示的图片。
那我们再想一想，图片只有3张,如果i=4，那么这个我们没有第4张图该怎么办呢，是不是可以让图片从头显示啊，也就是说如果传入的参数i超过了我们的图片总张数,我们可以让图片从头开始显示。反之,如果图片小于我们第一张图片的索引，我们可以让图片从最后一张图开始显示。

JS：

        // 实现移动功能的函数function change(i){index = i;    if(i > picItems.length-1){index = 0;}if(i < 0){index = picItems.length - 1;}pic.style.marginLeft = -index*940+"px";}

这样我们算是完成了代码的核心功能部分,那么接下来我们开始实现左右切换功能。仅仅需要在进行左右点击的时候传入相应的参数i就行了。

        // 左切换lf.onclick = function(){change(--index);}// 右切换rt.onclick = function(){change(++index); }

接着我们进行圆点的切换,思路很简单,我们在点击第一个圆点时，切换到第一张图,只需要把change（）函数中的参数i和我们的当前的圆点索引对应起来就行了。

        // 圆点切换:let的作用域是整个代码块,因此可避免使用闭包for(let i=0;i<cirItems.length;i++){cirItems[i].onclick = function(){index = i;change(index);}}

最后,我们只需要给change（）函数里面添加一个计时器，实现自动轮播就可以了，但是不要忘记清楚计时器哦

        var timer;// 实现移动功能的函数function change(i){index = i;    if(i > picItems.length-1){index = 0;}if(i < 0){index = picItems.length - 1;}clearTimeout(timer);pic.style.marginLeft = -index*940+"px";timer = setTimeout(function(){change(++index);},2000);}

以上就完成了点击切换和自动切换的效果。可以看一下效果图，大家可以给左边距添加以下过渡属性，这样会更自然一点，以下是效果图(未添加过渡属性)

用js实现点击切换+自动切换的轮播图相关推荐

html5时间线图片自动轮播,js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下函数封装:( 匀速运动函数) function animate(obj,target,step,speed){ cl ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
用JS实现图片切换、定时器、轮播图
一. 图片切换实现功能: 当点击"下一页"时,跳转到下一张图片: 当点击"上一页"时,跳转到上一张照片: 显示当前页数/总页数,如:2/6. <!DOC ...
JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...
简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红.绿.蓝)的效果. 实现效果: 不能发视频,截图来代替吧示意图1.png 示意图2.png 示意图3.png 实现思路使用 d ...
纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
京东网站页面编写(HTML、CSS、JS)，包括京东秒杀的倒计时、轮播图等功能
1. 页面效果: 2. 源码(gitee地址):https://gitee.com/meng-shuyu/jingdong 3. 网站图标一般存储在网站的根目录下,如京东网站图标地址为: https: ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...

用js实现点击切换+自动切换的轮播图

用js实现点击切换+自动切换的轮播图

用js实现点击切换+自动切换的轮播图相关推荐

最新文章

热门文章