收藏
批改状态：合格
老师批语：图文对照, 写得很完整, 关键是理解并记住
一.将html元素集合转换为数组对象
将html元素集合转换为数组对象有两种方式
1)array.slice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
//array.slice方法转换
var lis=document.getElementsByTagName("li");
var lisArr=Array.prototype.slice.call(lis,0);
console.log(lisArr);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2)ES6的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
//ES6方法转换
var lis=document.getElementsByTagName("li");
var lisArr=Array.from(lis);
console.log(lisArr);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二.定时器的种类与使用场景
javascript中定时器有4种,分别为一下四种,其中主要介绍常见的两种
1)setInterval：以固定的时间间隔，重复执行一个函数或者代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>开始</button>
<button>停止</button>
<ul class="ul1">
</ul>
<script>
var ul1=document.getElementsByClassName("ul1").item(0);
var but1=document.getElementsByTagName("button").item(0);
var but2=document.getElementsByTagName("button").item(1);
but1.addEventListener('click',stt,false);
but2.addEventListener('click',stp,false);
var timer=null;
function stt(event){
timer=setInterval(function(){
var li=document.createElement("li");
li.innerHTML="<h4>hi!!!</h4>";
ul1.appendChild(li);
},2000);
}
function stp(event){
clearInterval(timer);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
可以看到setInterval定时器会一直执行函数或者代码块
2)setTimeout ：只执行一次函数或者代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>开始</button>
<button>停止</button>
<ul class="ul1">
</ul>
<script>
var ul1=document.getElementsByClassName("ul1").item(0);
var but1=document.getElementsByTagName("button").item(0);
var but2=document.getElementsByTagName("button").item(1);
but1.addEventListener('click',stt,false);
but2.addEventListener('click',stp,false);
var timer=null;
function stt(event){
timer=setTimeout(function(){
var li=document.createElement("li");
li.innerHTML="<h4>hi!!!</h4>";
ul1.appendChild(li);
},2000);
}
function stp(event){
clearTimeout(timer);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
可以看到setTimeout定时器只执行一次函数或者代码块
3)setImmediate,
4)requestAnimationFrame
三.事件模拟器的应用场景和案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width:200px;
height:200px;
background-color:lightsalmon;
}
</style>
</head>
<body>
<div>点我!!</div>
<p id="money"></p>
<script>
var div=document.getElementsByTagName("div").item(0);
var p=document.getElementById("money");
var num=0;
var price=1;
var click=new Event('click');
setInterval(function(){
div.dispatchEvent(click);
num+=1;
console.log(num);
p.innerHTML=`广告收入: <span style="color:red"> ${num}</span>元`;
},2000);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
四.轮播图的基本实现原理与步骤
1.设置小圆点数量与图片数量对应,增加或减少图片数量同时小圆点数量跟随增加或减少
2.为小圆点绑定图片,实现点击小圆点,轮播到对应图片
通过循环获取到对象,根据小圆点自定义属性data-index与当前显示图片进行对比,如果相同,则循环去除所有有小圆点的active并且给当前小圆点添加active
3.设置左右翻页按钮的特效
为左右翻页按钮添加点击事件,通过判断className中左右翻页按钮的区别进行分辨左右翻页按钮
4.设置定时器实现自动翻页
以鼠标移入或移出轮播图范围为事件触发点,创建定时器setInterval，自定义点击事件对象,并将其分配给右翻页按钮,与定时器setinterval配合实现自动点击,从而造成自动轮播效果
五.轮播图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="2.css">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.box{
position: relative;
width:700px;
height:250px;
margin:0px auto;
}
.box .slider{
width:700px;
height:250px;
display:none;
}
.box .slider.active{
display:block;
}
.box .point-list{
position:absolute;
left:50%;
margin-left:-38px;
top:225px;
}
.box .point-list .point{
display:inline-block;
width:12px;
height:12px;
margin:0 5px;
background-color:white;
border-radius:100%;
}
.box .point-list .point.active {
background-color: black;
}
.box .point-list .point:hover{
cursor:pointer;
}
.skip{
position:absolute;
top:80px;
display:inline-block;
width:40px;
height:80px;
text-align:center;
line-height:80px;
background-color:lightseagreen;;
color:white;
opacity: 0.2;
font-size:36px;
}
.box .prev{
left:0;
}
.box .next{
right:0;
}
.box .skip:hover{
cursor:pointer;
opacity: 0.5;
color:black;
}
</style>
</head>
<body>
<div class="box">
<img src="images/banner1.jpg" alt="" data-index="1" class="slider active">
<img src="images/banner2.jpg" alt="" data-index="2" class="slider">
<img src="images/banner3.jpg" alt="" data-index="3" class="slider">
<div class="point-list">
<!--<span class="point active" data-index="1"></span>
<span class="point" data-index="2"></span>
<span class="point" data-index="3"></span>-->
</div>
<span class="skip prev"><</span>
<span class="skip next">></span>
</div>
<div class="gg">
</div>
<script>
//设置小圆点数量与图片数量对应
//获取所有的图片
var imgs=document.images;
//将所有的图片转换为数组
var imgArr=Array.prototype.slice.call(imgs,0);
//获取小圆点的父节点
var pointList=document.getElementsByClassName("point-list").item(0);
imgArr.forEach(function(img,index){
var span=document.createElement("span");
//如果图片数量为0,则给加上active
if(index===0){
span.classList.add("active");
}
span.classList.add("point");
//设置自定义的index对应
span.dataset.index=img.dataset.index;
//添加span
pointList.appendChild(span);
})
//给小圆点设置点击事件,切换图片
//获取所有的小圆点
var points=document.getElementsByClassName("point");
//转换为数组
var pointArr=Array.prototype.slice.call(points,0);
///给所有小圆点添加一点击事件
pointArr.forEach(function (point) {
point.addEventListener('click',setImgActive,false);
});
//设置事件:点击小圆点,图片进行切换
function setImgActive(event){
imgArr.forEach(function (img) {
if(img.dataset.index===event.target.dataset.index){ //event.target是当前被点击的小圆点
//去掉所有小圆点上面的active样式
imgArr.forEach(function (img) {
img.classList.remove("active");
});
//给当前小圆点对应的图片自定义属性添加active
img.classList.add("active");
//设置小圆点变成active样式
setPointActive(img.dataset.index);
}
});
}
//左右翻转图片按钮
///获取左右两个翻页按钮
var skip=document.getElementsByClassName("skip");
//为左面翻页按钮添加事件
skip.item(0).addEventListener('click',skipImg,false);
//为右面翻页按钮添加事件
skip.item(1).addEventListener('click',skipImg,false);
function skipImg(event){
var currentImg=null;
imgArr.forEach(function(img){
//获取当前图片：判断图片的classname中是否存在avtive
if(img.classList.contains("active")){
currentImg=img;
}
});
//左侧按钮
//判断自定义属性中是否存在prev
if(event.target.classList.contains("prev")){
//移除当前图片active
currentImg.classList.remove("active");
//更新上一个节点
currentImg=currentImg.previousElementSibling;
if(currentImg!==null&¤tImg.nodeName==="IMG"){
currentImg.classList.add("active");
}else{
//如果当前不存在上一个兄弟节点,则跳到最后一个
currentImg=imgArr[imgArr.length-1];
//为节点添加actiive
currentImg.classList.add("active");
}
}
//右侧按钮
//判断自定义属性中是否存在next
if(event.target.classList.contains("next")){
//移除当前图片active
currentImg.classList.remove("active");
//更新成下一个节点
currentImg=currentImg.nextElementSibling;
if(currentImg!==null&¤tImg.nodeName==="IMG"){
currentImg.classList.add("active");
}else{
//如果不存在下一个兄弟节点,则跳转到第一个
currentImg=imgArr[0];
//为节点添加active
currentImg.classList.add("active");
}
}
//获取当前图片的data-index值
var imgIndex=currentImg.dataset.index;
//按动左右两侧按钮时,下面按钮也跟着动
setPointActive(imgIndex);
}
function setPointActive(imgIndex){
//遍历所有小圆点,移除active样式
pointArr.forEach(function(point){
point.classList.remove("active")
});
pointArr.forEach(function(point){
//如果小圆点data-index值与相应的对应上
if(point.dataset.index===imgIndex){
//设置active样式
point.classList.add("active");
}
});
}
//定时器:自动轮播
//获取当前div
var box =document.getElementsByClassName("box").item(0);
//创建并初始化定时器
var timer=null;
//添加事件,当鼠标移出轮播图范围时候,启动定时器开始轮播
box.addEventListener("mouseout",startTimer,false);
//添加事件,当鼠标移入轮播图范围时候,清除定时器
box.addEventListener("mouseover",clearTimer,false);
function startTimer(event){
//自定义点击事件对象
var clickEvent=new Event("click");
//setInterval 定时器一直进行
//dispatchEvent分配点击事件,实现自动点击
timer=setInterval(function(){
skip.item(1).dispatchEvent(clickEvent);
},3000);
}
function clearTimer(event){
//清除定时器
clearInterval(timer);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
