javascript轮播图超详细

主要功能介绍：

鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止

鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始

动态创建下面的小圆点

无缝滚动效果

点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片

使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况

1、先搭建框架，标签如下图所示

2、html和css代码如下图所示,简单写一下，重要是学习js代码

    <style>* {margin: 0;padding: 0;}div {box-sizing: border-box;}.focus {margin: 0 auto;position: relative;width: 1200px;height: 600px;background-color: pink;overflow: hidden;}ul {position: absolute;/* margin-left: 100px; */width: 8000px;height: 600px;}ul li {float: left;width: 1200px;height: 600px;background-color: purple;overflow: hidden;}img {width: 100%;}span {position: absolute;width: 60px;height: 60px;background-color: rgba(0, 0, 0, .5);color: #fff;font-size: 40px;text-align: center;line-height: 60px;top: 40%;z-index: 2;cursor: move;}.left {display: none;left: 0;}.right {display: none;left: 1138px;}ol {position: absolute;top: 550px;left: 50%;height: 40px;background-color: rgba(0, 0, 0, .2);list-style: none;transform: translate(-50%);border-radius: 20px;padding: 0 20px;}ol li {float: left;width: 20px;height: 20px;border-radius: 10px;background-color: #fff;margin-top: 10px;margin-left: 15px;}.current {background-color: orange;}</style><script src="animate.js"></script><script src="轮播.js"></script>
</head><body><div class="focus"><span class="left">&lt</span><span class="right">&gt</span><ul><li><a href="javascript:;"><img src="1.jpg" alt=""></a></li><li><a href="javascript:;"><img src="2.jpg" alt=""></a></li><li><a href="javascript:;"><img src="3.jpg" alt=""></a></li><li><a href="javascript:;"><img src="4.jpg" alt=""></a></li></ul><ol></ol></div>

三、javascript代码如下

赶时间直接复制版：

导包：这是自己写的一个js代码文件，名字命名为animate.js

function animate(obj, target, callback) {// 写到创建定时器前面，始终让定时器，做多只有一个。clearInterval(obj.timer);obj.timer = setInterval(function() {// 当box左边距离page的距离大于target的时候，就清除计时器。// 但一点击就会又调用一次这个函数，就会又创建一次定时器，// 定时器存在就会不停向右移动// 只有达到极值（目的目标）时才会清除定时器。var step = (target - obj.offsetLeft) / 10;if (step >= 0) {step = Math.ceil(step);} else {step = Math.floor(step);};if (obj.offsetLeft == target) {clearInterval(obj.timer);// 当他清除定时器时，说明所有的都已经执行完毕，再写回调函数就是所有的执行完，他才执行if (callback) {callback();}// callback && callback();}// console.log('obj.offsetLeft:' + obj.offsetLeft);// console.log('step:' + step);// console.log('target' + target);obj.style.left = (obj.offsetLeft + step) + 'px';}, 50);}

轮播图代码：

window.addEventListener('load', function() {var spanLeft = document.querySelector('.left');var spanRight = document.querySelector('.right');var focus = document.querySelector('.focus');var ol = this.document.querySelector('ol');var ul = focus.querySelector('ul');// 鼠标经过focus区域，左右两边的按钮显示focus.addEventListener('mouseenter', function() {spanLeft.style.display = 'block';spanRight.style.display = 'block';// 当鼠标经过focus区域的时候，清除定时器clearInterval(timer);timer = null;});// 鼠标离开focus区域，左右两边的按钮隐藏focus.addEventListener('mouseleave', function() {spanLeft.style.display = 'none';spanRight.style.display = 'none';// 离开focus时开启定时器（这里就不用var timer 了，直接给timer赋一个函数即可）timer = setInterval(function() {// 手动调用点击事件  目标对象.事件类型（）spanRight.click();}, 2000)});// 动态创建小圆圈li并将他添加到ol中for (var i = 0; i < ul.children.length; i++) {// 每循环一次，创建一个li（不能创建一个li添加多次）var li = document.createElement('li');ol.appendChild(li);// 每创建一个li就给他创建一个自定义属性li.setAttribute('index', i);// 点击的这个li（不点击不会触发，当点击时早已经生成完毕）// 点击li让ul移动相应的距离li.addEventListener('click', function() {// 排他思想for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}this.className = 'current';// 获取被点击li的自定义属性index的值var index = this.getAttribute('index');// 当我们点击了某个li时，就把这个li的索引值index给num// 让点击的小圆圈和点击左右按钮移动图片联系起来//不然，如果点击第三个小圆圈，下面的小圆点到第三个，再点击右按钮，// 他又会按照点击右按钮的算法，给num赋值为2，让小圆点到第二个上去num = index;// 当我们点击了某个li时，就把这个li的索引值index给circle// 让点击的小圆圈和点击左右按钮,下面的小圆点也跟着动联系起来circle = index;// 注意ul没有position:absolute；就不能移动，原理就是靠改变绝对定位的值来改变位置的animate(ul, -index * focus.offsetWidth);});};// 先给ol里面的第一个小圆圈一个current属性，让圆圈不点击情况下，默认颜色为橘色ol.children[0].className = 'current';// 深度克隆第一个li，为了实现动态的无缝连接// 克隆的放到生成ol>li的后面，不然就会多生成一个li,影响效果var first = ul.children[0].cloneNode(true);// 将第一个li添加到ul的后面，他又在创建小圆圈的后面，所以不用多创建一个小圆圈ul.appendChild(first);// 点击一次右侧按钮，就让图片往右移动一个li的距离// 让左右按钮和ul图片移动联系起来var num = 0;// 定义一个全局变量circle，当点击左右切换按钮时，下面的小圆点也跟着动var circle = 0;// 定义一个flag变量，用节流阀来防止图片切换过快的现象var flag = true;spanRight.addEventListener('click                                  ', function() {// 点击按钮后，先让他进入if判断语句执行，进入后把路给他封上，// 再当所有的动画都执行完毕后，即用回调函数再把路给他打开if (flag) {flag = false;num++;// num是从0开始的，他最多到ul.children.length-1个，当num=(children.length-1)+1时，// 说明又得循环一次。    比如有4个li，再加上克隆的，一共有5个。num最大到4（从0开始）// 当num等于5时，让他的位置迅速的到num= 0的位置（肉眼看不见的移动），此时再让num = 1，再进行// 一次动画，相当于无缝连接// 时，返回开头，从0开始无缝滚动if (num == ul.children.length) {ul.style.left = 0;num = 1;}// 添加回调函数，等动画都执行完毕再执行回调函数即让他可以点击按钮，切换图片animate(ul, -num * focus.offsetWidth, function() {flag = true;});// 先++，因为点击后切换到第二个li，给第二个小圆点current才行// 让左右按钮和下面的小圆圈联系起来circle++;// 排他思想for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 一共有四个圈，circle从0开始，最大到3，让他的圈等4时，强制circle等于0，就实现循环if (circle == ol.children.length) {circle = 0;}// 让第circle+1个圈有橙色的类名ol.children[circle].className = 'current';}});// 点击一次左边的按钮，先num--如果他等于-1，也就是说一个循环结束，他该换到最后一张图片了// 就迅速把他的最后一张的ul的left值用style.left的方式赋值给ul,// 当他迅速（肉眼看不到的速度）切换到最后一张克隆的照片时，让num=最后一张照片的前一个值，// 再做一次动画，将ul的left值，减少一个li的大小======> 无缝滚动原理spanLeft.addEventListener('click', function() {if (flag) {num--;if (num == -1) {// 当num= -1时，让ul迅速到达第5图，即num= 4时<=>ul.children.length - 1// 再让他往前做一次动画------->无缝连接ul.style.left = -(ul.children.length - 1) * focus.offsetWidth;num = ul.children.length - 2;}animate(ul, -num * focus.offsetWidth, function() {flag = true;});circle--;// 排他思想for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}if (circle == -1) {circle = ol.children.length - 1;}ol.children[circle].className = 'current';}})// 自动播放轮播图var timer = this.setInterval(function() {// 手动调用点击事件  目标对象.事件类型（）spanRight.click();}, 1000);})

详细解析版：

1、鼠标经过focus区域，左右两边的按钮显示

鼠标离开focus区域，左右两边的按钮隐藏

这一块不是很难，当你想要做轮播图的时候，这就已经很简单了。

  window.addEventListener('load', function() {var spanLeft = document.querySelector('.left');var spanRight = document.querySelector('.right');var focus = document.querySelector('.focus');// 鼠标经过focus区域，左右两边的按钮显示focus.addEventListener('mouseenter', function() {spanLeft.style.display = 'block';spanRight.style.display = 'block';});// 鼠标离开focus区域，左右两边的按钮隐藏focus.addEventListener('mouseleave', function() {spanLeft.style.display = 'none';spanRight.style.display = 'none';});

2、动态创建小圆圈li并将他添加到ol中（ol中的小圆圈的数目不能固定，所以要动态添加）

    //获取小圆圈的ol和轮播图中的ulvar ol = this.document.querySelector('ol');var ul = focus.querySelector('ul');for (var i = 0; i < ul.children.length; i++) {// 每循环一次，创建一个li（不能创建一个li添加多次）var li = document.createElement('li');ol.appendChild(li);}// 先给ol里面的第一个小圆圈一个current属性，让圆圈不点击情况下，默认颜色为橘色ol.children[0].className = 'current';

3、点击下方的小圆圈，就切换图片（实质是让ul移动相应的距离），当前小圆点的颜色也改变

注意：这个操作可以在上述操作中进行，这步操作在点击之后才会运行，当你点击时,上述操作早已经执行完毕

   //获取小圆圈的ol和轮播图中的ulvar ol = this.document.querySelector('ol');var ul = focus.querySelector('ul');for (var i = 0; i < ul.children.length; i++) {// 每循环一次，创建一个li（不能创建一个li添加多次）var li = document.createElement('li');ol.appendChild(li);// 每创建一个li就给他创建一个自定义属性li.setAttribute('index', i);// 点击的这个li（不点击不会触发，当点击时上述早已经生成完毕）// 点击li让ul移动相应的距离li.addEventListener('click', function() {// 排他思想，让所有的li的className全消失，让当前的classname出现for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}this.className = 'current';// 获取被点击li的自定义属性index的值var index = this.getAttribute('index');animate(ul, -index * focus.offsetWidth);});}

4、为了实现无缝连接，需要深度克隆第一li并将它放到ul最后面的位置

深度克隆：var first = li.cloneNode(true);

在元素后添加：父级.appendChild(子级)；

    ol.children[0].className = 'current';// 深度克隆第一个li，为了实现动态的无缝连接// 克隆的放到生成ol>li的后面，不然就会多生成一个li,影响效果var first = ul.children[0].cloneNode(true);// 将第一个li添加到ul的后面，他又在创建小圆圈的后面，所以不用多创建一个小圆圈ul.appendChild(first);

5、点击左右按钮实现图片的切换效果

// 定义一个flag变量，用节流阀来防止图片切换过快的现象var flag = true;spanRight.addEventListener('click', function() {// 点击按钮后，先让他进入if判断语句执行，进入后把路给他封上，// 再当所有的动画都执行完毕后，即用回调函数再把路给他打开if (flag) {flag = false;num++;// num是从0开始的，他最多到ul.children.length-1个，当num=(children.length-1)+1时，// 说明又得循环一次。    比如有4个li，再加上克隆的，一共有5个。num最大到4（从0开始）// 当num等于5时，让他的位置迅速的到num= 0的位置（肉眼看不见的移动），此时再让num = 1，再进行// 一次动画，相当于无缝连接// 时，返回开头，从0开始无缝滚动if (num == ul.children.length) {ul.style.left = 0;num = 1;}// 添加回调函数，等动画都执行完毕再执行回调函数即让他可以点击按钮，切换图片animate(ul, -num * focus.offsetWidth, function() {flag = true;});// 先++，因为点击后切换到第二个li，给第二个小圆点current才行// 让左右按钮和下面的小圆圈联系起来circle++;// 排他思想for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 一共有四个圈，circle从0开始，最大到3，让他的圈等4时，强制circle等于0，就实现循环if (circle == ol.children.length) {circle = 0;}// 让第circle+1个圈有橙色的类名ol.children[circle].className = 'current';}});// 点击一次左边的按钮，先num--如果他等于-1，也就是说一个循环结束，他该换到最后一张图片了// 就迅速把他的最后一张的ul的left值用style.left的方式赋值给ul,// 当他迅速（肉眼看不到的速度）切换到最后一张克隆的照片时，让num=最后一张照片的前一个值，// 再做一次动画，将ul的left值，减少一个li的大小======> 无缝滚动原理spanLeft.addEventListener('click', function() {if (flag) {num--;if (num == -1) {// 当num= -1时，让ul迅速到达第5图，即num= 4时<=>ul.children.length - 1// 再让他往前做一次动画------->无缝连接ul.style.left = -(ul.children.length - 1) * focus.offsetWidth;num = ul.children.length - 2;}animate(ul, -num * focus.offsetWidth, function() {flag = true;});circle--;// 排他思想for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}if (circle == -1) {circle = ol.children.length - 1;}ol.children[circle].className = 'current';}})

6、创建定时器实现自己滚动

  // 自动播放轮播图var timer = this.setInterval(function() {// 手动调用点击事件  目标对象.事件类型（）spanRight.click();}, 1000);

7、当鼠标放到focus时，清除定时器。当鼠标移开focus时，创建定时器。

这一步是在第一步的基础上完成的

    // 鼠标经过focus区域，左右两边的按钮显示focus.addEventListener('mouseenter', function() {spanLeft.style.display = 'block';spanRight.style.display = 'block';// 当鼠标经过focus区域的时候，清除定时器clearInterval(timer);timer = null;});// 鼠标离开focus区域，左右两边的按钮隐藏focus.addEventListener('mouseleave', function() {spanLeft.style.display = 'none';spanRight.style.display = 'none';// 离开focus时开启定时器（这里就不用var timer 了，直接给timer赋一个函数即可）timer = setInterval(function() {// 手动调用点击事件  目标对象.事件类型（）spanRight.click();}, 2000)});

8、让几个步骤联系起来

            // 当我们点击了某个li时，就把这个li的索引值index给num// 让点击的小圆圈和点击左右按钮移动图片联系起来//不然，如果点击第三个小圆圈，下面的小圆点到第三个，再点击右按钮，// 他又会按照点击右按钮的算法，给num赋值为2，让小圆点到第二个上去num = index;// 当我们点击了某个li时，就把这个li的索引值index给circle// 让点击的小圆圈和点击左右按钮,下面的小圆点也跟着动联系起来circle = index;// 注意ul没有position:absolute；就不能移动，原理就是靠改变绝对定位的值来改变位置的

javascript轮播图超详细相关推荐

Jquery版轮播图超详细
目录主要功能介绍: 1.先搭建框架 2.html和css代码三.jquery代码原生js的轮播图也写过,如需观看请您移步我的其他文章~ 主要功能介绍: 鼠标移动到轮播图中显示左右按钮,轮播图片的 ...
JavaScript轮播图代码
JavaScript轮播图代码 <html><head><meta charset="utf-8"><title>轮播图</t ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
JavaScript轮播图（面向对象）
步骤轮播图1 HTML+CSS 轮播图2 动态生成页面通过 JavaScript程序生成 div标签中所有轮播图需要的标签生成 ul ol div 标签节点根据数组动态生成原始 ul& ...
阶段二网页搭建入门之javaScript与前端案例 javaScript轮播图
加粗样式## 效果图图片素材 html <!doctype html> <html lang="en"> <head><meta cha ...
javascript轮播图（缓冲运动）
哈喽,大家好呀!我又来咯!相信大家在翻网页的时候都会看到首页的轮播图!今天讲讲实现原理,感觉有用就收藏吧! 轮播图主要是利用缓冲运动来实现图片的切换,这样看起来比较有画面感哈! 那么什么叫做缓冲运动呢 ...
网页轮播图（详细版）
在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片. 功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐 ...
qq音乐（轮播图）详细介绍
目录 QQ音乐出续集了啊小伙伴们! 下面说一下这三块分别是怎么设置的额外一些细节的修改: 接下来展示一下我的代码部分 css样式 html代码 js代码: 今日金句 QQ音乐出续集了啊小伙伴 ...
css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
js原生 JavaScript轮播图【渐变淡入淡出】效果实现（附代码）
目录前言轮播图的组成以及实现思想左右按钮的隐藏与显示核心思想代码实现动态生成底部小圆圈核心思想代码实现右左按钮实现核心思想代码实现实现自动播放核心思想代码实现整体代码(复 ...

javascript轮播图超详细

javascript轮播图超详细相关推荐

最新文章

热门文章