【JavaScript】网页轮播图
目录
- HTML搭建
- 功能实现
- 小圆圈事件
- 左右按钮事件
- 自动播放
轮播图也叫焦点图,是网页中比较常见的网页特效。
功能:
- 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
- 点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理。
- 图片播放的同时,下面小圆圈模块跟随一起变化。
- 点击小圆圈,可以播放相应图片。
- 鼠标不经过轮播图, 轮播图也会自动播放图片。
- 鼠标经过,轮播图模块, 自动播放停止。
HTML搭建
分为三部分:1.左右按钮 2.图片 3.小圆圈
index.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/index.css"><script src="./js/animate.js"></script><script src="./js/index.js"></script>
</head>
<body><div class="main"><!-- 左右按钮 --><a href="javascript:;" class="left"><</a><a href="javascript:;" class="right">></a><!-- 图片 --><ul><li><img src="./img/scenery1.jpg" alt=""></li><li><img src="./img/scenery2.jpg" alt=""></li><li><img src="./img/scenery3.jpg" alt=""></li><li><img src="./img/scenery4.jpg" alt=""></li></ul><!-- 小圆圈 --><ol class="circle"><li class="current"></li><li></li><li></li><li></li></ol></div>
</body>
</html>
index.css
*{padding: 0;margin: 0;
}ul,ol{list-style: none;
}a{text-decoration: none;
}img {width: 700px;height: 400px;
}.main{position: relative;width: 700px;height: 400px;margin: 100px auto;background-color: pink;
}/* 左右按钮 */
.left,
.right {position: absolute;top: 50%;transform: translate(0, -50%);width: 24px;height: 40px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 40px;color: #fff;
}.right {right: 0;
}/* 图片 */
.main ul {width: 1000%;
}
.main ul li{float:left;
}/* 小圆点 */
.circle {position: absolute;bottom: 20px;left: 50%;transform: translate(-50%, 0);
}.circle li {float: left;width: 8px;height: 8px;border: 2px solid skyblue;margin-left: 3px;border-radius: 50%;cursor: pointer;
}.current {background-color: skyblue;
}
效果
功能实现
小圆圈事件
因为小圆圈和图片的数量应该是一样的,如果小圆数量和图片的li数量是分开写,如果后期增减图片修改代码时比较麻烦,所以我们可以优化小圆代码,实现小圆数量随图片li数量一致。
方法:先清空ol里面的li
,先得到有多少张图片,然后用js
动态创建li
,再插入到ol
当中,实现自动化的效果,与此同时实现选中li,类名变为current
的功能
index.js
// 主体
var main = document.querySelector('.main');// 1.小圆圈
// 动态生成圆圈
var ul = main.querySelector('ul');
var ol = main.querySelector('.circle');for (var i = 0; i < ul.children.length; i++) {var li = document.createElement('li'); //插入olol.appendChild(li);li.addEventListener('click', function() {//所有li清除类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}//当前li设置current类名this.className = 'current';})
}
// 第一个小li设置为current
ol.children[0].className = 'current';
实现点击小圆图片滑动的效果,用到封装的动画函数animate.js
animate.js
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();}}obj.style.left = obj.offsetLeft + step + 'px';}, 15);
}
核心算法:点击某个小圆,让图片滚动小圆的索引号乘以图片的宽度作为ul移动距离(因为图片是向左走,所以为负值),这里索引号需要创建自定义属性来获取。
注意:因为移动的是ul整个图片集合,所以ul需要定位才能使用animate
函数,不然没效果;给ul设置定位后左右按钮消失了,所以要给左右按钮再设置定位层级。
/* 图片 */
.main ul {position: absolute;left: 0;top: 0;width: 1000%;
}
index.js
for (var i = 0; i < ul.children.length; i++) {var li = document.createElement('li'); //插入olol.appendChild(li);// 创建自定义属性li.setAttribute('index', i);li.addEventListener('click', function() {//所有li清除类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}//当前li设置current类名this.className = 'current';var index = this.getAttribute('index');var mainWidth = main.offsetWidth;animate(ul, - index * mainWidth);})}
效果
左右按钮事件
原理与小圆圈的相似,给左右按钮添加事件,定义一个num
变量,每次点击自增1,ul移动的距离为 图片的宽乘于num
。
此外还要设置无缝滚动,不然图片会一直滚动下去。
无缝滚动:把ul的第一个li
克隆一份放到ul
的后面,当图片滚动到克隆的第一个图片时,让ul快速跳到左侧(即两个瞬间同步),left
为0,同时num
赋值为0。
克隆:使用代码实现,自动克隆
最后给main加上overhidden
index.js
// 切换图片var first = ul.children[0].cloneNode(true);ul.appendChild(first);var num = 0;right.addEventListener('click', function() {if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, - num * mainWidth);})
效果
实现左右按钮与小圆圈切换同步
单独设置一个变量circle控制小圆的变化,点击右侧按钮就自加,到克隆的第一张图调回0。
index.js
// 小圆圈变化var circle = 0;right.addEventListener('click', function() {if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, - num * mainWidth);circle++;if (circle == ol.children.length) {circle = 0;}for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}ol.children[circle].className = 'current';})
但是此时有个问题:
点击了小圆圈再点击右按钮图片滚动时,图片的实际位置发生错乱,图片的位置不对应。
这是因为右侧按钮点击事件时通过变量num
来控制的,而num
变量和小圆圈的点击事件没有任何关系,而发生错乱。
解决:
把num
和circle
的值改为点击li的索引号的值,这一步是在创建li时加的
var index = this.getAttribute('index');
circle = num = index;
左按钮与右按钮类似,反过来即可
left.addEventListener('click', function() {if (num == 0) {num = ul.children.length - 1;ul.style.left = - num * mainWidth + 'px';}num--;animate(ul, - num * mainWidth);circle--;if (circle < 0) {circle = ol.children.length - 1;}for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}ol.children[circle].className = 'current';})
自动播放
添加定时器,把点击事件 right.click()放在定时器中即可,相当于自动点击右按钮播放
// 3.自动播放var timer = this.setInterval(function() {right.click();}, 2000)
效果
【JavaScript】网页轮播图相关推荐
- JavaScript——网页轮播图( 实现点击小圆点、图片滑动、小圆点样式改变)
一.轮播图要实现的效果: 实现点击小圆点.图片滑动.小圆点样式改变 二.轮播图实现效果步骤: 1.利用html+css完成轮播图片,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切 ...
- 用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个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 ...
- html 轮播图自适应,JavaScript 自适应轮播图
JavaScript 自适应轮播图 代码 话不多说,先上代码,方便复制粘贴.演示 轮播图 *{ margin: 0; padding: 0; } ul{ list-style: none; } img ...
- HTML+CSS+JavaScript实现轮播图效果
前言 先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果 百度网盘:百度网盘 请输入提取码 提取码:slbt 没有添加动画效果,添加了自动切换 ...
最新文章
- 冯小刚导演系列公益短片之林心如版
- libsvm中tools(easy.py,subset.py,grid.py,checkdata.py)的使用
- Equipment download - generic inbound 和mapping处理逻辑分析
- cellet 的相关线程
- php email,两种PHP邮件发送的方式
- 查看端口命令及端口功能详解
- 《Effective Java》第5条:避免创建不必要的对象
- 计算机房设计规范2008,电子信息系统机房设计规范(GB50174-2008)(下)
- 各地的磁倾角_中国各地磁偏角
- A goal-driven tree-structured neural model for math word problems论文阅读
- 架构师必备!15个经典面试问题及回答思路
- Instagram登录使用教程目录
- pigeon主题如何将顶部图片扩大
- 关于若依管理系统配置多数据源的原理分析
- 基于Linux系统部署新世纪版五笔输入法
- 《超越LOGO设计:国际顶级平面设计师的成功法则(第2版)》—第1章无处不在的LOGO...
- 深圳真实收入是多少?
- 筛法(线性筛,厄拉多塞筛)
- 计算机科学与技术导论ppt,计算机科学与技术专业导论.ppt
- 一个程序员的真实故事(下)