1、点击左右按钮,页面实现滚动效果
2、点击下方焦点,图片也开始滚动切换
不能用z-index来改变图片的相应级别,因为要使用滚动切换,(移动)。
bug很多
<!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>Document</title>
<style>
.box {
width: 600px;
height: 300px;
position: relative;
overflow: hidden;
margin-left: 0px;
padding-left: 0px;
margin: 30px auto
}
.box img {
/* display: none; */
width: 600px;
height: 300px;
float: left;
margin-left: 0px;
}
.box1 {
/* display: inline-block; */
width: 1900px;
height: 300px;
position: absolute;
top: 0px;
left: -600px;
padding: 0px
}
.left,
.right {
width: 30px;
height: 30px;
background: rgba(0, 0, 0, 0.3);
text-align: center;
line-height: 30px;
font-size: 20px;
position: absolute;
top: 135px;
}
.left {
left: 0px
}
.right {
left: 570px
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<img src="https://img0.baidu.com/it/u=3249059478,3438607495&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500" alt="" class="im1">
<img src="https://img2.baidu.com/it/u=282419407,1896681766&fm=26&fmt=auto" alt="" class="im2">
<img src="https://img0.baidu.com/it/u=3476682447,114963827&fm=26&fmt=auto" alt="" class="im3">
</div>
<!-- 放左右按钮 相对定位-->
<div class="left">←</div>
<div class="right">→</div>
</div>
<script>
// document.querySelector('.box1').style.left = document.querySelector('img').offsetLeft + 'px';
//改变box1的left值,可以更换图片
//首先获得左右箭头事件。注意,当box1的left值为0时,左箭头的事件应该取消。box1的left值为3*600时,右箭头的事件应该取消
var left = document.querySelector('.left')
var right = document.querySelector('.right')
var box1 = document.querySelector('.box1')
//给箭头注册事件
left.addEventListener('click', fn)
function fn() {
//left点击时,box1盒子往左边移动。left为负。添加动画,让left值从0,慢慢变为-600;在开始的left值基础上-600
var timer = setInterval(animate, 10)
var c = box1.offsetLeft
console.log(c)
function animate() {
//首先获得开始的ldeft值
var d = box1.offsetLeft
if (d == c - 600) {
clearInterval(timer)
}
if (d == c - 1200) {
//清除left事件
left.removeEventListener('click', fn)
right.addEventListener('click', rfn)
} else {
box1.style.left = d - 2 + 'px'
console.log(d)
console.log(box1.offsetLeft)
}
//移动到什么时候清除定时器呢
//当b<=0时,清除定时器
}
}
right.addEventListener('click', rfn)
function rfn() {
var timer = setInterval(animate, 10)
var a = box1.offsetLeft
console.log(a)
function animate() {
//首先获得开始的ldeft值
var b = box1.offsetLeft
if (b == a + 600) {
clearInterval(timer)
}
if (b == a + 1200) {
//清除left事件
right.removeEventListener('click', rfn)
left.addEventListener('click', fn)
} else {
box1.style.left = b + 2 + 'px'
console.log(b)
console.log(box1.offsetLeft)
}
//移动到什么时候清除定时器呢
//当b<=0时,清除定时器
}
}
//动画
</script>
</body>
</html>
1、鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮
2、点击右侧按钮一次,图片往左播放一张,以次类推,左侧按钮同理
3、图片播放的同时,下面小圆圈模块跟随一起变化
4、点击小圆圈,可以播放相应的图片
5、鼠标不经过轮播图,轮播图也会自动播放图片
6、鼠标经过,轮播图模块,自动播放停止
动态生成小圆圈
核心:小圆圈的个数要和图片张数一致
1、只要得到有多少张图(有多少个li)
2、利用循环动态生成小圆圈,放到ol里面
3、创建节点li
4、插入节点appendChild(li)
5、第一个小圆圈添加current类,就是默认第一张图显示
小圆圈的排他思想:
1、点击当前小圆圈,就添加current类
2、其余小圆圈就移除这个类
3、在生成小圆圈的同时,就直接绑定这个点击事件
点击小圆圈滚动图片:
1、核心:点击某个小圆圈,就让图片滚动,小圆圈的索引号乘以图片的宽度,作为ul移动的距离
怎么知道我点的是那个小圆圈:
设置一个自定义属性,点击的时候就获得该自定义属性的值
点击右侧按钮一次,就让图片滚动一张
1、声明一个变量num,点击一次,自增1,让这个变量乘以图片宽度,就是ul的滚动距离
2、图片的无缝滚动
把ul的第一个li复制一份,放到ul的最后面
当图片滚动到克隆的最后一张图片的时候,让ul快速的、不做动画的跳到最左侧,left=0
同时将num赋值为0;可以从新开始滚动图片
克隆第一张图片:
1、克隆ul第一个li clodeNode() 加ture 深克隆 复制里面的子节点。flase浅克隆,不复制节点
2、添加到ul的最后,appendChild
点击右侧按钮,小圆圈变化
最简单的方法就是再声明一个nun变量,(而不是跟随num),每次点击按钮,nun自增一。注意右侧按钮也是这个变量,因此要声明全局变量
自动播放功能:
1、添加一个定时器
2、类似于点击右侧按钮
3、手动调用右侧按钮点击事件 arrowr.click( )
4、鼠标经过focus,停止定时器,离开就开启
还是后面的插件好
<!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>Document</title>
<style>
img {
width: 600px;
height: 300px
}
.focus {
position: relative;
width: 600px;
height: 300px;
background-color: purple;
padding-left: 0px;
overflow: hidden;
}
/* 父盒子宽度比较小,而liimg里面加起来宽度很大,不能一行显示,就会竖着显示 */
/* 解决:把ul的宽度设置的大一点 */
.focus ul li {
float: left;
list-style: none;
}
.focus ul {
width: 400%;
position: absolute;
left: 0px;
top: 0px;
margin: 0px;
padding: 0px
}
.arrow-l,
.arrow-r {
/* display: none; */
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 24px;
text-decoration: none;
z-index: 7;
color: white;
text-align: center;
line-height: 24px;
}
.arrow-l {
left: 0px;
}
.arrow-r {
right: 0px
}
.circle {
width: 90px;
height: 40px;
position: absolute;
bottom: 0px;
left: 245px;
/* margin: 0px;
padding: 0px; */
z-index: 1;
text-align: center;
line-height: 40px;
}
.circle li {
width: 30px;
height: 30px;
float: left;
list-style: circle;
color: white;
}
.circle .current {
list-style: disc
}
</style>
<script src="JS/animater.js"></script>
<!-- 注意顺序 -->
<script src="JS/index.js"></script>
</head>
<body>
<div class="focus">
<a href="javascript:;" class="arrow-l">←</a>
<a href="javascript:;" class="arrow-r">→</a>
<!-- 核心滚动区域 -->
<!-- 要让所有图片排在一行显示,不要什么都用div解决 -->
<ul>
<li>
<a href=""><img src="https://img0.baidu.com/it/u=3249059478,3438607495&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500" alt=""></a>
</li>
<li>
<a href=""><img src="https://img2.baidu.com/it/u=282419407,1896681766&fm=26&fmt=auto" alt=""></a>
</li>
<li>
<a href=""><img src="https://img0.baidu.com/it/u=3476682447,114963827&fm=26&fmt=auto" alt=""></a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
</html>
index.js
window.addEventListener('load', function() {
//1、获取元素
var arrowl = document.querySelector('.arrow-l')
var arrowr = document.querySelector('.arrow-r')
var focus = document.querySelector('.focus')
var focuswidth = focus.offsetWidth
//2、鼠标经过轮播图,左右箭头显示
focus.addEventListener('mouseover', function() {
arrowl.style.display = 'block'
arrowr.style.display = 'block'
clearInterval(timer)
timer = null //清除定时器变量
})
//鼠标离开,就隐藏左右按钮
focus.addEventListener('mouseout', function() {
arrowl.style.display = 'none'
arrowr.style.display = 'none'
timer = setInterval(function() {
//手动调用点击事件
arrowr.click()
}, 1000)
})
//3、动态生成小圆圈
var ol = document.querySelector('.circle')
var ul = focus.querySelector('ul') //只选focus下面的ul
//得到li的个数
for (var i = 0; i < ul.children.length; i++) {
//创建li
var li = document.createElement('li')
//记录当前小圆圈的索引号,通过自定义属性
li.setAttribute('index', i)
//放入ol
ol.appendChild(li)
//4、小圆圈的排他思想
li.addEventListener('click', function() {
//把所有li清除current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
//当前的li设置current类名
this.className = 'current'
//点击小圆圈,实现图片滑动的效果,此时用到animate动画函数(注意因为index.js依赖animate.js所以,animate.js要写道index.js上面
//使用动画函数的前提,该元素必须有定位
//注意是ul在移动,而不是li在移动
//小圆圈的索引号乘以图片的宽度,作为ul移动的距离注意是负值
//当点击了某个li,就拿到当前li的索引号
var b = this.getAttribute('index')
//当点击某个li,就要把li的索引号值给num
num = parseInt(b) //注意要转换为数值型,因为num声明的是一个全局变量,所以可以这样赋值
console.log(num) //关键在于小圆圈索引号
animate(ul, -b * focuswidth)
})
}
//把ol里面的第一个li设置为current类;默认第一张图选中
ol.children[0].className = 'current'
//5、点击右侧按钮一次,图片移动一张
// var flag = 0 //变量一定是一个全局变量
// arrowl.addEventListener('click', function() {
// flag++
// //如果点击箭头,没有效果可能是前面a的href没有改,因为是a链接,一点击就会刷新页面
// if (flag <= 2) {
// animate(ul, -flag * focuswidth)
// //修改小圆圈,排他
// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = ''
// }
// ol.children[flag].className = 'current'
// }
// if (flag == 3) {
// // flagr = 2
// //要实现无缝滚动
// flag = 0
// ul.style.left = 0 + 'px' //这样设置的话,会看到一个突然的跳变效果,最好是赋值一份显示。当在此点击就立马跳到第一张,这样就没有跳变的效果了
// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = ''
// }
// ol.children[0].className = 'current'
// }
// })
// arrowr.addEventListener('click', function() {
// flag = flag - 1
// console.log(flag)
// if (flag >= 0) {
// animate(ul, -flag * focuswidth)
// //修改小圆圈,排他
// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = ''
// }
// ol.children[flag].className = 'current'
// }
// if (flag < 0) {
// flag = 2
// console.log(flag)
// ul.style.left = -2 * focuswidth + 'px'
// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = ''
// }
// ol.children[2].className = 'current'
// }
// }
// )
var nun = 0 //控制小圆圈的变化 直接换成num,这样就能实现小圆圈、箭头点击次数的联系
//克隆第一张图片,放到ul最后面
var frist = ul.children[0].cloneNode(true)
//复制到ul最后
ul.appendChild(frist) //这个克隆是写在了生成小圆圈的下面,所以克隆一份并不会影响小圆圈的数量
var flag = true
arrowr.addEventListener('click', function() {
if (flag) {
flag = false //关闭节流阀
num = num + 1
console.log(num)
//如果走到了最后复制的图片,ul要快速设置为0
if (num <= 3) {
animate(ul, -num * focuswidth, function() {
flag = true //动画执行完毕,打开节流阀
})
nun++
//先清除全部的current的类名
}
if (num <= 2) {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
//设置当前的类名
ol.children[num].className = 'current'
}
if (num == 3 || num == 4) {
//克隆图片,并滚动,//会不会多创建一个小圆圈
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
//设置当前的类名
ol.children[0].className = 'current'
}
//4就是图片的个数-1
if (num == ul.children.length) {
flag = true
//快速设置left=0;回到第一张
ul.style.left = 0 + 'px'
num = 0
// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = ''
// }
// //设置当前的类名
// ol.children[0].className = 'current'
}
}
})
//左侧按钮
var num = 0
arrowl.addEventListener('click', function() {
if (flag) {
flag = false
num = num - 1
console.log(num)
//如果走到了最后复制的图片,ul要快速设置为0
if (num == -1) {
ul.style.left = -(ul.children.length - 1) * focuswidth + 'px'
num = ul.children.length - 1
}
if (num >= 0) {
animate(ul, -num * focuswidth, function() {
flag = true
})
//先清除全部的current的类名
}
if (num <= 2) {
console.log(num)
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
//设置当前的类名
ol.children[num].className = 'current'
}
}
})
//自动播放功能,定时器
var timer = setInterval(function() {
//手动调用点击事件
arrowr.click()
}, 1000)
})
animater.js
function animate(obj, target, callback) {
clearInterval(obj.timer) //先把原先地定时器清除之后,再开启另外一个新地定时器
obj.timer = setInterval(fn, [15])
function fn() {
var a = obj.offsetLeft //不能换成div.style.left 不然会只移动一次。注意读取位置永offset,修改永style
var step = (target - a) / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step) //将结果赋值回去
//把步长值改为整数,不要出现小数的情况
if (a == target) {
//取消定时器
clearInterval(obj.timer)
//执行回调函数 函数名+()回调函数写到定时器结束里面
//首先判断没有有这个回调函数
if (callback) {
callback()
}
}
obj.style.left = a + step + 'px'
}
}
function callback() {
img.src = '10-右.png'
img.style.width = '50%'
}
function callback1() {
img.src = '9-左.png'
img.style.width = '50%'
}