bom案例6-轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
} .all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
} .screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
} .screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
} .screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
} .all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
} .all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
} .all ol li.current {
background: yellow;
} #arr {
display: none;
z-index: 1000; } #arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
} #arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="data:images/wf1.jpg" width="500" height="200"/></li>
<li><img src="data:images/wf2.jpg" width="500" height="200"/></li>
<li><img src="data:images/wf3.jpg" width="500" height="200"/></li>
<li><img src="data:images/wf4.jpg" width="500" height="200"/></li>
<li><img src="data:images/wf5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script src="animate.js"></script>
<script src="index.js"></script>
</body>
</html>
common中的代码
function my$(id) {
return document.getElementById(id);
}
// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {
var node, nodes = element.childNodes, i = 0;
while (node = nodes[i++]) {
if (node.nodeType === 1) {
return node;
}
}
return null;
}
// 处理浏览器兼容性
// 获取下一个兄弟元素
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
// 判断当前浏览器是否支持 innerText
if (typeof element.innerText === 'string') {
element.innerText = content;
} else {
element.textContent = content;
}
}
// 处理注册事件的兼容性问题
// eventName, 不带on， click mouseover mouseout
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}
// 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
if (element.removeEventListener) {
element.removeEventListener(eventName, fn);
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
}
// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
}
// 获取鼠标在页面的位置，处理浏览器兼容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}
//格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {
// 判断参数date是否是日期对象
// instanceof instance 实例(对象) of 的
// console.log(date instanceof Date);
if (!(date instanceof Date)) {
console.error('date不是日期对象')
return;
}
var year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours(),
minute = date.getMinutes(),
second = date.getSeconds();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
// 获取两个日期的时间差
function getInterval(start, end) {
// 两个日期对象，相差的毫秒数
var interval = end - start;
// 求 相差的天数/小时数/分钟数/秒数
var day, hour, minute, second;
// 两个日期对象，相差的秒数
// interval = interval / 1000;
interval /= 1000;
day = Math.round(interval / 60 / 60 / 24);
hour = Math.round(interval / 60 / 60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}
animate中的代码
// var timerId = null;
// 封装动画的函数
function animate(element, target) {
// 通过判断，保证页面上只有一个定时器在执行动画
if (element.timerId) {
clearInterval(element.timerId);
element.timerId = null;
} element.timerId = setInterval(function () {
// 步进 每次移动的距离
var step = 10;
// 盒子当前的位置
var current = element.offsetLeft;
// 当从400 到 800 执行动画
// 当从800 到 400 不执行动画 // 判断如果当前位置 > 目标位置 此时的step 要小于0
if (current > target) {
step = - Math.abs(step);
} // Math.abs(current - target) <= Math.abs(step)
if (Math.abs(current - target) <= Math.abs(step)) {
// 让定时器停止
clearInterval(element.timerId);
// 让盒子到target的位置
element.style.left = target + 'px';
return;
}
// 移动盒子
current += step;
element.style.left = current + 'px';
}, 5);
}
index中的代码
// 获取元素
var box = my$('box');
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1]; // 箭头 arrow
var arr = my$('arr');
var arrLeft = my$('left');
var arrRight = my$('right'); // 图片的宽度
var imgWidth = screen.offsetWidth; // 1 动态生成序号
// 页面上总共有多少张图片 5 没有克隆的li
var count = ul.children.length;
for (var i = 0; i < count; i++) {
var li = document.createElement('li');
ol.appendChild(li);
setInnerText(li, i + 1);
// 2 点击序号 动画的方式 切换图片
li.onclick = liClick; // 让当前li记录他的索引
// 设置标签的自定义属性
li.setAttribute('index', i);
}
function liClick() {
// 2.1 取消其它li的高亮显示，让当前li高亮显示
for (var i = 0; i < ol.children.length; i++) {
var li = ol.children[i];
li.className = '';
}
// 让当前li高亮显示
this.className = 'current';
// 2.2 点击序号，动画的方式切换到当前点击的图片位置 // 获取自定义属性
var liIndex = parseInt(this.getAttribute('index'));
animate(ul, -liIndex * imgWidth); // 全局变量index 和 li中的index保持一致
index = liIndex;
}
// 让序号1高亮显示
ol.children[0].className = 'current'; // 3 鼠标放到盒子上显示箭头
box.onmouseenter = function () {
arr.style.display = 'block';
// 清除定时器
clearInterval(timerId);
} box.onmouseleave = function () {
arr.style.display = 'none';
// 重新开启定时器
timerId = setInterval(function () {
arrRight.click();
}, 2000);
}
// 4 实现上一张和下一张的功能
// 下一张 var index = 0; // 第一张图片的索引
arrRight.onclick = function () {
// 判断是否是克隆的第一张图片，如果是克隆的第一张图片，此时修改ul的坐标，显示真正的第一张图片
if (index === count) {
ul.style.left = '0px';
index = 0;
}
//
// 总共有5张图片，但是还有一张克隆的图片 克隆的图片的索引是5
// 4 < 5
index++;
if (index < count) {
// animate(ul, -index * imgWidth);
// //
// 获取图片对应的序号，让序号点击
ol.children[index].click();
} else {
//如果是最后一张图片 以动画的方式，移动到克隆的第一张图片
animate(ul, -index * imgWidth);
// 取消所有序号的高亮显示，让第一序号高亮显示
for (var i = 0; i < ol.children.length; i++) {
var li = ol.children[i];
li.className = '';
}
ol.children[0].className = 'current';
}
}
// 上一张
arrLeft.onclick = function () {
// 如果当前是第一张图片，此时要偷偷的切换到最后一张图片的位置（克隆的第一张图片）
if (index === 0) {
index = count;
ul.style.left = - index * imgWidth + 'px';
} index--;
ol.children[index].click(); // // 如果不是第一张的话 index--
// if (index > 0) {
// index--;
// // animate(ul, -index * imgWidth);
// ol.children[index].click();
// }
} // 无缝滚动
// 获取ul中的第一个li
var firstLi = ul.children[0];
// 克隆li cloneNode() 复制节点
// 参数 true 复制节点中的内容
// false 只复制当前节点，不复制里面的内容
var cloneLi = firstLi.cloneNode(true);
ul.appendChild(cloneLi); // 5 自动切换图片
var timerId = setInterval(function () {
// 切换到下一张图片
arrRight.click();
}, 2000);
bom案例6-轮播图的更多相关文章
- jQuery实际案例②——三层轮播图
1.如图,这种轮播图需要实现的是,当鼠标移到2上时,第二张图片从右侧过来 2.需要注意的:①很明显这是通过改变z-index与left值来实现的: ②整体布局需注意,图与数值(1,2,3,4,5)两 ...
- js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- 微信小程序------轮播图
swiper 微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高. 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper' ...
- JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）
JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...
- 使用Vue-MUI轮播图失效问题解决案例（在Vue的update中执行）
我使用的是mui+vue,社区关于轮播图失效的问题也有几个.我这边遇到的一个情况是我把所有的东西都写到plusReady事件中会导致轮播图搞死都不动,按照其他问答解决了vue生命周期等等的问题.提出来 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- ⒃bootstrap组件 轮播图 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue(小案例_vue+axios仿手机app)_首页（底部导航栏+轮播图+九宫格）
---恢复内容开始--- 一.前言 1.底部导航(两种做法) 2.轮播图 ...
- JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
随机推荐
- 「算法笔记」数位 DP
一.关于数位 dp 有时候我们会遇到某类问题,它所统计的对象具有某些性质,答案在限制/贡献上与统计对象的数位之间有着密切的关系,有可能是数位之间联系的形式,也有可能是数位之间相互独立的形式.(如求满足 ...
- ADADELTA: AN ADAPTIVE LEARNING RATE METHOD
目录 引 主要内容 算法 ADADELTA 代码 引 这篇论文比较短,先看了这篇,本来应该先把ADAGRAD看了的.普通的基于梯度下降的方法,普遍依赖于步长,起始点的选择,所以,受ADAGRAD的启发 ...
- .NET 云原生架构师训练营（ASP .NET Core 整体概念推演）--学习笔记
演化与完善整体概念 ASP .NET Core 整体概念推演 整体概念推演到具体的形式 ASP .NET Core 整体概念推演 ASP .NET Core 其实就是通过 web framework ...
- VUE3 之 循环渲染
1. 概述 老话说的好:单打独斗是不行的,要懂得合作. 言归正传,今天我们来聊聊 VUE3 的 循环渲染. 2. 循环渲染 2.1 循环渲染数组 <body> <div id=&qu ...
- Unity——ShaderLab实现玻璃和镜子效果
在这一篇中会实现会介绍折射和反射,以及菲尼尔反射:并且实现镜子和玻璃效果: 这里和之前不同的地方在于取样的是一张CubeMap: demo里的cubemap使用的一样,相机所在位置拍出来的周围环境图: ...
- MATLAB 错误之生成step图表出错
m文件: step(Gi_close) hold on 错误示例: 使用step函数生成图表后,报错如下: Plots must be of the same type and size to be ...
- Java 获取客户端浏览器中的语言设置
获取客户端的首选语言 javax.servlet.ServletRequest.getLocale() 根据Accept-Language请求头返回客户端的首选语言.如果客户端请求没有Accept-L ...
- mongdb集群
一.mongodb的集群 mongodb有两种架构: 第一种架构:和mysql的结构类似,也有主从结构,但是他不能实现故障自动切换 于是有了第二种架构.官方不推荐使用这种架构. 第二种:mongodb ...
- Centos6.8安装并配置VNC
一般服务器都会在IDC或云端,为了可以看到服务器的图形化界面,需要安装配置VNC,本例为Centos6.8上安装配置VNC. [root@hostname ~]#yum install -y tige ...
- linux VI命令快捷键
ctrl+f 下一页 ctrl+b 上一页 ctrl+u 上半页 ctrl+d 下半页 数字+空格键 根据当前光标移动多少个字母 0键 光标移动到第一个字母,是当前行的 $键 光标移动到最后一个字母 ...