标签：function onload arr ol 轮播 img index js images
01-轮播图
<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</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: 500px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
/* width: 20px;
height: 20px; */
width: 8px;
height: 8px;
border-radius: 4px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
.all ol li:hover {
background: yellow;
}
#arr {
display: none;
}
#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>
<script src="js/fade.js"></script>
<script>
const images = ["images/laugh01.gif", "images/laugh02.gif", "images/laugh03.gif", "images/laugh04.gif", "images/laugh05.gif", "images/laugh43.gif"]
// js结构在html的上面：如何保证js能拿到下面的元素？加载事件：window.onload
window.onload = function () {
// 需求：动态生成页码：放到ol中
// 1. 获取父元素：ol
let ol = document.querySelector('.all ol')
// 2. 知道数组的长度：循环实现效果
for (let i = 0; i < images.length; i++) {
// 3. 动态生成li：li要做事件，document.createElement()
let li = document.createElement('li')
// li.innerText = i + 1
// 4. 将li添加到ol中
ol.appendChild(li)
// 需求：给所有页码增加点击事件
// 事件处理
li.onclick = function () {
// 是否图片点的就是自己：自己不用处理
if (index == i) return
// 1. 把原来的页码干掉选中效果
ol.children[index].classList.remove('current')
// 2. 修改的index的值：就是i
index = i
// 3. 动画效果换图：先淡出，后切换，再淡入，最后换页码
let img = all.querySelector('img')
fadeTo(img, .4, function () {
// 改图
img.src = images[index]
// 淡入
fadeTo(img, 1)
// 页码
ol.children[index].classList.add('current')
})
}
}
// 给第一个孩子加上类：第一张图片默认被选中
ol.firstElementChild.classList.add('current')
// 需求：自动轮播，鼠标移入停止，移出继续
// 1. 定时器：自动触发rightClick
let timeId = setInterval(rightClick, 3000)
/* let timeId = setInterval(function () {
arr.lastElementChild.click()
// 元素.onclick = function(){} // 绑定事件
// 元素.click() // 触发点击事件（代码触发）
}, 3000) */
// 2. 修改鼠标移入事件：结束自动轮播
// 3. 修改鼠标移出事件：继续自动轮播
// 需求：鼠标移入，显示箭头；鼠标移出隐藏
// 1. 获取大盒子：all
// * 操作的是#arr
let all = document.querySelector('.all')
let arr = all.lastElementChild
// 2. 鼠标移入事件
all.onmouseover = function () {
arr.style.display = 'block'
// 2. 修改鼠标移入事件：结束自动轮播
clearInterval(timeId)
}
// 3. 鼠标移出事件
all.onmouseout = function () {
arr.style.display = ''
// 3. 修改鼠标移出事件：继续自动轮播
timeId = setInterval(rightClick, 3000)
}
// 需求：点击向右的箭头，实现图片的淡入与淡出
// 1. 引入js文件：fade.js
// 2. 定义一个变量：记录当前被现实的图片的下标，默认是第一张：index = 0
let index = 0
// 3. 给向右的按钮做点击事件：有名函数 onclick = function(){} onclick = myClick
arr.lastElementChild.onclick = rightClick
function rightClick() {
// 取消点击效果
arr.lastElementChild.onclick = null
// 3.1 先将当前index（当前图片）对应的页面的样式：类干掉
ol.children[index].classList.remove('current')
// 3.2 index+1代表下一张图片
index++
// 3.3 安全：index的值 == 数组的长度：index = 0
if (index == images.length) index = 0
// 3.4 动画：先淡出0.4，然后改图片，淡入到1，给新的页码加上类
let img = all.querySelector('img')
fadeTo(img, .4, function () {
// 改图
img.src = images[index]
// 淡入：增加回调，目的是重新为右点击增加点击事件
fadeTo(img, 1, function () {
arr.lastElementChild.onclick = rightClick
})
// 页码
ol.children[index].classList.add('current')
})
}
// 需求：点击向左按钮，切换到左边的图片
// 1. 给向左的按钮添加点击事件：#left
arr.firstElementChild.onclick = leftClick
// 2. 事件处理
function leftClick() {
// 清除点击事件
arr.firstElementChild.onclick = null
// 2.1 清理页码的特殊效果
ol.children[index].classList.remove('current')
// 2.2 index-1看左边的图片
index--
// 2.3 安全处理：index不能小于0，小于0：等于最后一张图images.length - 1
if (index < 0) index = images.length - 1
// 2.4 动画：先淡出，后切换图片，再淡入，增加页码
let img = all.querySelector('img')
fadeTo(img, .4, function () {
// 改图
img.src = images[index]
// 淡入：增加回调，等动画执行全部结束，重新提供点击事件
fadeTo(img, 1, function () {
arr.firstElementChild.onclick = leftClick
})
// 页码
ol.children[index].classList.add('current')
})
}
}
</script>
</head>
<body>
<div class="all">
<div class="screen">
<ul>
<li><img src="images/laugh01.gif" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>
- js文件：
// 透明函数
// 参数1：元素对象：ele
// 参数2：目标值：target
// 参数3：回调函数：连续动画，fn
function fadeTo(ele, target, fn) {
// 1. 先清理动画效果
clearInterval(ele.timeId)
// 2. 开始定时器
ele.timeId = setInterval(function () {
// 3. 拿到元素原来的透明度：小数parseFloat
let current = parseFloat(getComputedStyle(ele).opacity)
// console.log(current)
// 4. 计算步长：(目标 - 当前) * 0.1
let step = (target - current) * 0.1
// console.log(step) // 小数没有办法取整（要么是0，要么1）
// * 其他步骤
// 4.1 放大100倍
step *= 100
// 4.2 取整：安全判定
if (step > 0) step = Math.ceil(step)
else step = Math.floor(step)
// console.log(step)
// 5. 修改元素的透明度
ele.style.opacity = current + step / 100
console.log(current, step);
// 6. 结束（判定）：透明度达到目标
if (step == 0) {
clearInterval(ele.timeId)
// 回调函数
if (typeof fn == 'function') fn()
}
}, 10)
}
标签：function,onload,arr,ol,轮播,img,index,js,images 来源： https://blog.csdn.net/miaopasi_poi/article/details/116209762
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。