最终效果
所用知识点
定时器
每隔1000ms执行一次count函数
clearInterval() 停止setInterval方法
setInterval(function(){
count();
},1000)
对元素进行修改:
对内容的修改
表单: ele.value
非表单: ele.innerText=’ ’ (结果只为文本)
ele.innerHTML=’ ’ (结果包含标签)
属性
固有属性(元素对象的属性)
ele.attribute (ele.src)
ele[attribute] (ele[attribute])
两者之间的区别:.后面只能为属性值,不能为字符串
[]内的attribute可以为变量,而.后不可以
当设置的属性为class时,应写成ele.className,但是此方法相对复杂,可直接用
classList得到class的集合,其包含3个属性
ele.classList.add();
ele.classList.remove();
ele.classList.replace(old.new)
自定义属性(人为的,手动写在标签上的属性,HTML本身不支持)
以下三种方法既可以操作固有属性,又可以操作自定义属性
ele.getAttribute(属性名)
ele.setAttribute(属性名.属性值) //本身自带新增功能
ele.removeAttribute(属性名)
鼠标事件
onclick(点击)
ondblclick(双击)
onmousedown(鼠标按钮被按下)
onmouseup(鼠标按钮松开)
onmouseenter(鼠标移入) onmouseleave(鼠标移出) // 不支持冒泡
onmouseover(鼠标移入) onmouseout(鼠标移出) // 支持冒泡
onmousemove(鼠标移动)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none
}
.wrapBox {
width: 800px;
margin: 100px auto;
position: relative;
}
.swiperBox img {
width: 100%;
display: none;
}
.swiperBox .active {
display: block;
}
.nav {
position: absolute;
right: 20px;
bottom: 25px;
}
.nav li {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
float: left;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.nav .active {
background-color: red;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrapBox">
<div class="swiperBox">
<img class="active" src="img/t1.jpg" alt="">
<img src="img/t2.jpg" alt="">
<img src="img/t3.jpg" alt="">
<img src="img/t4.jpg" alt="">
</div>
<ul class="nav">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script>
var oImgs = document.querySelectorAll('img');
var oLis = document.querySelectorAll('.nav li');
//利用全局变量来记录移动到哪张图片
var index = 0;
var timer;
start();
//运用事件循环绑定
for (var i = 0; i < oLis.length; i++) {
//为每一li传入对应的index值
oLis[i].index = i;
//当鼠标移入li时触发事件
oLis[i].onmouseenter = function () {
//清除定时器,使图片不在继续滚动
clearInterval(timer);
//记录下此时的li的index值,调用方法,显示此index值对应的图片
index = this.index
activeOne();
}
//当鼠标移出li时触发事件
oLis[i].onmouseleave = function () {
//调用定时器,自动播放图片
start();
}
}
function activeOne() {
//删除所有激活事件
for (var i = 0; i < oImgs.length; i++) {
oImgs[i].classList.remove('active');
oLis[i].classList.remove('active');
}
//将此时index值对应的图片及li样式激活
oImgs[index].classList.add('active');
oLis[index].classList.add('active');
}
function start() {
clearInterval(timer);
timer = setInterval(function () {
//将图片的index值向下加一,调用下一张图片
index++;
//如果index值大于所有轮播图的长度时,index值恢复成0,显示第一张图
if (index >= oImgs.length) {
index = 0;
}
//调用方法,激活该index值对应样式
activeOne();
}, 2000)
}
</script>
</html>