JavaScript实现网页轮播图
轮播图也成为焦点图，是网页中比较常见的网页特效
一.功能：
1.鼠标经过轮播图模块，左右两边的按钮显示，鼠标离开轮播图模块，就隐藏左右按钮。
2.点击右（左）侧按钮一次，图片往左（右）播放一张，一以此类推，点击几次按钮，就顺序播放几张图片。
3.图片播放的同时，下面的小圈圈模块也跟随一起变化。
4.点击小圆圈，可以播放相应的图片。
5.鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过轮播图，自动播放就会停止。
二.过程：
1.基础结构的搭建（html和css）
首先需要准备一个盒子，盒子里面有三个部分，第一个部分再左右两边用来实现左右两侧按钮箭头，第二部分用来实现底部小圆圈 第三部分则装ul来中央实现图片的滚动。
对于所放图片必须放在一行上，才能实现图片的左右转换，因此需要将图片所在的ul的宽度足够快，比盒子的宽度大很多（至少比所有图片的总和宽度大），然后要加浮动，才能将图片放在一行上
2.轮播图的功能特效（JavaScript）
(1)鼠标经过离开轮播图 左右按钮显示隐藏
先用css设置左右两个按钮先隐藏起来，然后绑定鼠标经过和离开事件，当经过时按钮显示，当鼠标离开轮播图页面时候就隐藏起来。
(2)自动生成底部的小圆圈
核心：小圆圈的个数=图片张数
利用for循坏，先创造一个节点creatElement()，然后把创造的节点appendChild()插入到ol里去，循坏图片的张数次。然后ol里面的第一个小li设置为类名为selectd 表示被选中了。
(3)点击小圆圈 实现图片滑动
排他思想：干掉所有人，留下我自己
滚动图片算法：点击某个小圆，就让图片滚动，小圆圈的索引号×图片的宽度作为ul的移动距离。
滑动需要引用动画，因此需要自己封装一个animate（）动画函数（也可以使用jQuery中的animate（））。动画函数必须定位才能移动，因此需要对ul需要设置绝对定位。
直接在生成小圆圈的同时绑定点击事件，然后清除所有小li的selected被选择的类名，将当前的小li的类名设置为selected。然后取图片的宽度，再设置自定义属性（在生成小圆圈的时候，来记录当前的索引号），点击了某个小li就需要拿到当前小li的索引号，根据算法和利用animate（）函数实现图片滚动效果。
（4）右侧按钮实现无缝滚动
由于有层级的影响，左右按钮被ul压下去了，需要再css中加层级。
对右按钮进行一个鼠标点击绑定事件，声明一个全局变量num，每点击一次就自增1，每加一次，就播放一次动画。（让这个变量×图片宽度，就是ul的滚动距离）
由于图片播放到最后一张后，再点击按钮，图片会露底，变成背景颜色，因此我们需要把ul的第一个li复制一份，放到ul的最后面，当图片滚动到克隆的最后一张图片的时候，让ul快速的，不做动画的跳到最左侧：left为0（即复原到最开始位置）。同时把num赋值为0，使其重新开始滚动
于此同时复制照片的同时，导致底部的小圆圈也增加了一个，因此我们可以让js帮我复制第一个小li把它放在最后。即再点击右键按钮之前，用到克隆第一个li cloneNode（）加true深克隆 复制里面的子节点 然后添加到ul的最后
（5）右侧按钮与小圆圈之间联系效果
声明一个全局变量circle，每点击一次有右侧按钮，我就让变量++，就播放下一张图片，让小圆圈跟随一起变化。即先清除其余小圆圈的setedcted被选中的类名，然后留下当前的小圆圈的setected被选中的类名
由于图片有5张，小圆圈有4个，需要添加一个判断条件，当走到克隆这张照片的时候，我们需要复原即circle=0。
由于num和circle变量和li点击没有任何联系，存在差异，因此再点击小圆圈的同时需要拿到当前的索引号，把这个li的索引号给num和circle
（6）左侧按钮功能（与右侧按钮相似，同理）
（7）自动播放功能
添加一个定时器 自动播放功能类似于点击右侧按钮，使用手动调用事件来调用右侧按钮点击事件对象.click(),然后再前面的鼠标经过事件中加入停止定时器，鼠标离开事件中加入开启定时器。
（8）节流阀控制
为了防止轮播图按钮连续点击造成播放过快的的问题 需要引入节流阀。即当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
利用回调函数，添加一个变量来控制，锁住函数和解锁函数，即开始的时候令变量为false来锁住函数，当执行完动画后，利用回调函数将变量变为true来解锁函数。
到此为止，整个轮播图的功能就实现完毕了。
HTML部分：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鞠婧祎</title><link rel="stylesheet" href="../css/基础.css"><!--这个animate函数要写到轮播图.js的上面--><script src="../js/animate.js"></script><script src="../js/轮播图.js"></script>
</head><body><div class="ju"><!--左侧按钮--><a href="javascript:;" class="prev"> < </a><!--右侧按钮--><a href="javascript:;" class="next"> > </a><!--核心的滚动区域--><ul class="iamges"><li><a href="#"><img src="../iamges/12.jpg"></a></li><li><a href="#"><img src="../iamges/13.jpg"></a></li><li><a href="#"><img src="../iamges/14.jpg"></a></li><li><a href="#"><img src="../iamges/15.jpg"></a></li><li><a href="#"><img src="../iamges/16.jpg"></a></li></ul><!--小圆圈--><ol class="circle"></ol></div>
</body></html>css部分：
* {margin: 0;padding: 0;
}li {list-style: none;
}.ju {position: relative;margin: auto;width: 400px;height: 304px;overflow: hidden;
}.ju ul {width: 600%;position: absolute;top: 0;left: 0;
}.ju ul li {display: block;float: left;
}.prev {position: absolute;left: 0;top: 50%;margin-top: 15px;width: 20px;height: 30px;background-color: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;border-top-right-radius: 15px;border-bottom-right-radius: 15px;display: none;z-index: 2;
}.next {position: absolute;right: 0;top: 50%;margin-top: 15px;width: 20px;height: 30px;background-color: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;border-top-left-radius: 15px;border-bottom-left-radius: 15px;display: none;z-index: 2;
}.circle {position: absolute;bottom: 10px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background-color: rgba(255, 255, 255, .3);border-radius: 7px;
}.circle li {width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;float: left;
}.circle .selected {background-color: orange;
}js部分：
自我封装的animate
function animate(obj, target, callback) {//清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer = setInterval(function() {// 步长值写到定时器的里面//把步长值改成整数，避免小数问题var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {//停止动画 本质是停止定时器clearInterval(obj.timer);//回调函数写到定时器结束里面//if (callback) {//调用函数//callback();//}callback && callback();}//步长值（目标值-现在位置）/10obj.style.left = obj.offsetLeft + step + 'px';}, 30); }
主题部分
window.addEventListener('load', function() {//1.获取元素var prev = document.querySelector('.prev');var next = document.querySelector('.next');var ju = document.querySelector('.ju');var imagewidth = ju.offsetWidth;//2.鼠标经过两边的按钮 显示隐藏左右按钮ju.addEventListener('mouseenter', function() {prev.style.display = 'block';next.style.display = 'block';clearInterval(timer);timer = null; //清除定时器})ju.addEventListener('mouseleave', function() {prev.style.display = 'none';next.style.display = 'none';timer = setInterval(function() {//手动调用点击事件next.click();}, 2000);})var ul = ju.querySelector('.iamges');//console.log(ul.children.length);var ol = ju.querySelector('.circle');//console.log(ol.children.length);for (var i = 0; i < ul.children.length; i++) {//创建第一个小livar li = this.document.createElement('li');//记录当前小圆圈的索引号，通过自定义属性来做li.setAttribute('index', i);//把小li插入到ol里面ol.appendChild(li);//4.小圆圈的排他思想，直接绑定点击事件li.addEventListener('click', function() {//干掉所有人 把所有的小li清除selected类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}//留下我自己，当前的小li设置current类名this.className = 'selected';//5.点击小圆圈，移动图片 移动kiku这个盒子//ul的移动距离 小圆圈的索引号×图片的宽度 注意是负值//点击某个小li 就拿到当前小li的索引号var index = this.getAttribute('index');//当我们点击了某个小li 就把这个索引号给num,circlenum = index;circle = index;//console.log(index);//console.log(imagewidth);animate(ul, -index * imagewidth);})}ol.children[0].className = 'selected';//6.克隆第一张（li）图片放在最后面var first = ul.children[0].cloneNode(true);ul.appendChild(first);//7.点击右侧按钮 图片移动一张var num = 0;var circle = 0;//flag 节流阀var flag = true;next.addEventListener('click', function() {if (flag) {flag = false; //关闭节流阀//如果走到了最后一张复制图片，此时的ul要快速复原if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * imagewidth, function() {flag = true; //打开节流阀});//8.点击右侧按钮 小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放circle++;//如果circle==5 说明到了最后张图片 要复原if (circle == ol.children.length) {circle = 0;}//先清除其余circle的类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}//留下当前circle的类名ol.children[circle].className = 'selected';}})//9左侧按钮的做法prev.addEventListener('click', function() {if (flag) {flag = false; //关闭节流阀//如果走到了最后一张复制图片，此时的ul要快速复原if (num == 0) {num = ul.children.length - 1;ul.style.left = -num * imagewidth + 'px';}num--;animate(ul, -num * imagewidth, function() {flag = true; //打开节流阀});//点击左侧按钮 小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放circle--;//如果circle<0 说明到了最后张图片 小圆圈要改为第5个小圆圈if (circle < 0) {circle = ol.children.length - 1;}//先清除其余circle的类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}//留下当前circle的类名ol.children[circle].className = 'selected';}})//自动播放轮播图var timer = setInterval(function() {//手动调用点击事件next.click();}, 2000); })
JavaScript实现网页轮播图相关推荐
- 【JavaScript】网页轮播图
目录 HTML搭建 功能实现 小圆圈事件 左右按钮事件 自动播放 轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...
- 用javascript做网页轮播图
文章目录 网页轮播图: 功能需求: 动图展示: 代码分析: 主题结构部分: 样式设置: 交互效果: 引用缓动动画(图片滚动的效果) 网页轮播图: 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能 ...
- 【JavaScript】缓动动画、网页轮播图
缓动动画 动画函数封装 1.1 动画实现原理 缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面 案例:京东侧边栏 ...
- web前端html图片轮播,如何使用LayUI实现网页轮播图_WEB前端开发,layui,轮播图
关于html5中自定义属性的介绍_WEB前端开发 html5为我们提供了以[data-]为前缀定义需要的属性即可设置自定义属性,如[ ].本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参 ...
- 网页轮播图+缓动效果
实现某宝上面的网页轮播图+缓动效果 代码和注释: <!DOCTYPE html> <html lang="en"><head><meta ...
- layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容 本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
- Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例
动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 ...
- 【重点案例】b站pink老师JavaScript的PC端网页特效 案例代码——网页轮播图
目录 代码段: 1.index.js部分(全是重点) 2.animate.js部分(重点,是之前封装好的动画函数) 3.index.html部分(重点在标红区) 4.index.css部分(重点在标红 ...
- JavaScript——网页轮播图（ 实现点击小圆点、图片滑动、小圆点样式改变）
一.轮播图要实现的效果: 实现点击小圆点.图片滑动.小圆点样式改变 二.轮播图实现效果步骤: 1.利用html+css完成轮播图片,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切 ...
最新文章
- Jpcap过滤GTunnel程序数据包
- python3协程 queue_使用gevent库+queue模块实现多协程爬虫，提高爬取效率！
- java 前端导出exvel_使用纯前端做的Excel导出了解一下
- mysql引擎 实际应用_MySQL数据库中的三个引擎
- 新浪的wap网站，发现原来我们的head存在着这样的差异
- 设计模式入门-工厂模式
- vant 表单按钮置灰_Vant Switch 开关
- oracle查询排序id,Oracle查询数据怎么按照甲乙丙丁排序？谢谢
- 苹果Iphone/Ipad--L2TP虚拟教程
- 少数派实测报告：AI巨无霸模型GPT-3 | 附送API 调用方法「AI核心算法」
- 分析图第二讲导出图片和后期PS5.12
- 如何成为不可替代的程序员？掌握这个方法，裁员名单永远没有你
- Docker私有仓库搭建笔记（四）
- TRS_WCM（拓尔思信息技术有限公司）内容协作平台平台置标经验攻略
- 利用Hackrf One进行GPS定位欺骗制作超级跑马机
- 神经网络与深度学习笔记 （五）深层神经网络
- mysql中何时需要引号,何时在MySQL中使用单引号，双引号和反勾号
- Allwinner Camlinux的3g驱动移植
- 机床数据采集之新代(SYNETC)IP网络地址参数设定
- 临沂市职业经理人协会举办第五届企业发展论坛