JS案例-网页轮播图
- 鼠标经过轮播图模块，左右按钮提示，离开隐藏左右按钮
- 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
- 图片播放的同时，下面小圆圈模块跟随一起变化
- 点击小圆圈，可以播放相应图片
- 鼠标不经过轮播图，轮播图也会自动播放图片
- 鼠标经过，轮播图模块自动播放停止
第一步 鼠标经过显示按钮 鼠标离开按钮消失
//获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
//鼠标经过显示按钮
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
})
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
})
第二步：考虑如何动态生成小圆圈 让小圆圈个数与图片个数一致
首先得到ul里图片个数，利用循环动态生成小圆圈，创建节点并插入节点，然后给第一个小圆圈插入current类
//动态生成小圆圈
var ul = focus.querySelector('ul');//必须限定focus里面的
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
ol.appendChild(li);
//[]
}
ol.children[0].className = 'current';//第一个小圆圈默认变色
第三步：利用排他思想，实现点击小圆圈变色
//可以直接在生成小圆圈的同时绑定点击事件
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
})
第四步：点击小圆圈滚动图片
注意是ul在移动
当点击某个小圆圈，就让图片滚动，移动距离为图片索引号*图片宽度
知识点：索引号如何得到？
- 通过给每个li设定自定义属性点击时获取自定义属性
var ul = focus.querySelector('ul');//必须限定focus里面的
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
//通过自定义属性记录小圆圈索引号
li.setAttribute('index', i);
ol.appendChild(li);
//可以直接在生成小圆圈的同时绑定点击事件
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
//点击小圆圈移动图片
var index = this.getAttribute('index');
var focusWidth = focus.offsetWidth;
animate(ul, -index * focusWidth);
})
}
第五步：点击左右按钮滚动
思路：声明一个变量，每点击一次number++
但是当点击次数过多会走到空白区域
如何实现无缝滚动？
- 把ul第一个li复制一份，放到ul后面，当图片滚动到克隆的最后一张的时候不做动画直接快速跳回第一张：left=0，同时num=0；
如何克隆第一张图片？
- 利用节点的克隆和添加操作
ol.children[0].className = 'current';//第一个小圆圈默认变色
var firstLi = ul.children[0].cloneNode(true);
ul.appendChild(firstLi);//克隆第一张图
var num = 0;
arrow_r.addEventListener('click', function () {
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth);
})
第六步：点击按钮小圆圈跟随变化
再定义一个变量circle，每次点击一次按钮则++，如果circle==4，说明走到最后这张图片，使circle复原
var circle = 0;
arrow_r.addEventListener('click', function () {
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth);
//实现点击按钮小圆圈跟随变化
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';
第七步：此时有两个bug
按钮的点击操作和圆点的点击是不同变量，无法共同使用,两个事件的变量需要同步
应该在点击小圆点事件中添加
num = index;
circle = index;
第八步:左侧按钮同理
arrow_l.addEventListener('click', function () {
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth);
//实现点击按钮小圆圈跟随变化
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';
})
第十步 代码优化 相同的可以封装函数
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
三元表达式简化
circle = circle < 0 ? ol.children.length - 1 : circle;
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
最后：自动播放！
发现自动播放时和点击右侧按钮很类似
可以手动调用右侧按钮点击事件arrow_r.click()
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);//鼠标经过停止定时器
timer = none;
})
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function () {//鼠标离开开启定时器
arrow_r.click();//手动调用点击事件
}, 2000)
})
补充：节流阀
防止轮播图按钮连续点击造成播放过快
目的：当上一个函数动画执行完毕，再去执行下一个函数动画，让事件无法连续触发
利用回调函数，添加一个变量来控制，锁住函数和解锁函数
- 开始设置一个变量var flag=true
- if(flag) {flag=false;do something}关闭水龙头
利用回调函数 动画执行完毕（使用回调函数），false=true 打开水龙头
完整js代码
window.addEventListener('load', function () {
//获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
var num = 0;
//鼠标经过显示按钮
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);//鼠标经过停止定时器
timer = none;
})
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function () {//鼠标离开开启定时器
arrow_r.click();//手动调用点击事件
}, 2000)
})
//动态生成小圆圈
var ul = focus.querySelector('ul');//必须限定focus里面的
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
//通过自定义属性记录小圆圈索引号
li.setAttribute('index', i);
ol.appendChild(li);
//可以直接在生成小圆圈的同时绑定点击事件
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
//点击小圆圈移动图片
var index = this.getAttribute('index');
//当我们点击了某个li，就要把这个li的索引号给num//////////////////////////////bug必须改
num = index;
circle = index;
animate(ul, -index * focusWidth);
})
}
ol.children[0].className = 'current';//第一个小圆圈默认变色
var firstLi = ul.children[0].cloneNode(true);
ul.appendChild(firstLi);//克隆第一张图
var circle = 0;//全局变量
var flag = true;
arrow_r.addEventListener('click', function () {
if (flag) {
flag = false;//关闭节流阀
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth, function () {
flag = true;//打开节流阀
});
//实现点击按钮小圆圈跟随变化
circle++;
if (circle == ol.children.length) {
circle = 0;
}
circleChange();
}
})
arrow_l.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function () {
flag = true;
});
//实现点击按钮小圆圈跟随变化
circle--;
circle = circle < 0 ? ol.children.length - 1 : circle;
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
circleChange();
}
})
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
var timer = setInterval(function () {
arrow_r.click();//手动调用点击事件
}, 2000)
})
animate.js
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
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();//借助短路运算如果有参数传入才会调用callback
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
相关html
<div class="focus">
<a href="javascript:;" class="arrow-l"><</a>
<a href="javascript:;" class="arrow-r">></a>
<ul>
<li><a href="#"><img src="upload/focus1.png" alt=""></a></li>
<li><a href="#"><img src="upload/focus1.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/focus2.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/focus3.jpg" alt=""></a></li>
</ul>
<ol class="circle">
</ol>
相关css
.focus {
float: left;
overflow: hidden;
position: relative;
width: 721px;
height: 455px;
}
.arrow-l,.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
color:rgb(175, 170, 170);
font-size: 20px;
line-height: 40px;
text-align: center;
z-index: 10;
background:rgba(0,0,0, .5);
}
.arrow-l {
left: 0;
border-radius: 0 30px 30px 0;
}
.arrow-r {
right: 0;
border-radius: 30px 0 0 30px;
}
.focus ul{
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li{
float: left;
}
.circle{
position: absolute;
bottom: 0;
left: 40px;
bottom: 0;
height: 18px;
width: 150px;
}
.circle li{
height: 12px;
width: 12px;
float: left;
border-radius: 8px;
border: 1px solid #e4e4e4;
margin: 0 4px;
}
.current {
background-color: #e4e4e4;
}
JS案例-网页轮播图的更多相关文章
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 用 JS 写 （轮播图 / 选项卡 / 滑动门）
页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...
随机推荐
- JVM（Java虚拟机） 整理
JVM整体结构 本文主要说的是HotSpot虚拟机, JVM 全称是 Java Virtual Machine,中文译名:Java虚拟机 简化一下: Java字节码文件 Class文件本质上是一个以8 ...
- 【6】python生成数据曲线平滑处理——(Savitzky-Golay 滤波器、convolve滑动平均滤波)方法介绍，推荐玩强化学习的小伙伴收藏
相关文章: Python xlwt数据保存到 Excel中以及xlrd读取excel文件画图 先上效果图: 由于高频某些点的波动导致高频曲线非常难看,为了降低噪声干扰,需要对曲线做平滑处理,让曲线过 ...
- C/C++ 关于运算符重载笔记
加号运算符重载: 重载加号运算符,让 p3 = p1 + p2 改成 p3.mage = p1.mage + p2.mage 实现两个数据成员的相加. 告诉编译器,两个类中的数据成员应该怎么相加. 成 ...
- vue+elementui批量上传下载注意事项
批量手动上传文件,和表单数据一起提交 1.在el-upload组件关键的钩子,其它省略 multiple :auto-upload = "false" :file-list = & ...
- C++界面库(十几种,很全)
C++界面库是用于GUI界面设计的工具包,可以帮助开发人员快速开发出美观.易用的界面.在选择C++界面库的时候,开发人员需要根据项目要求.使用场景.开发难易程度以及所适配的操作系统等因素进行综合考虑. ...
- 深入浅出Java多线程(八)：volatile
引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第八篇内容:volatile.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在当今的软件开发领域,多线程编程 ...
- 洛谷P2415 集合求和（数学问题，使用集合子集求和公式）
可以知道对于一个有n个数据的集合,其子集个数有2^n个 至于证明可以这样理解,对于n个数据,其子集就是对数据进行组和,而对于每个位置上的数据,组合时仅有两种状态即有此数据或无此数据,也就是有两种可能, ...
- 小知识：开启NTP服务并设置为开机启动
我的一套测试环境发现时间慢了10分钟,影响我做各类测试. 首先就想到NTP服务,发现已安装NTP安装包,也有默认的NTP配置文件,只是没有启用. 用到的相关命令参考如下: [root@bogon ~] ...
- Spark相关面试题
Spark Core面试篇01 一.简答题 1.Spark master使用zookeeper进行HA的,有哪些元数据保存在Zookeeper? 答:spark通过这个参数spark.deploy.z ...
- JS leetcode x 的平方根 题解分析
壹 ❀ 引 这几天心情复杂,也不知道形容.做道题吧,其实是上周的题,一直没整理,比较巧的是,这也是我同学17年去PPTV面试时遇到的一题,题目来自leetcode69. x 的平方根,题目描述如下: ...