晚上听课有些懵,早晨又学习了两边,思路就比较清晰了,就是通过js的命令语句获取到元素的属性值并进行修改,项目可以自己敲出来,按键切换这块也通过百度整明白了
实例
<!DOCTYPE html>
<html lang="en">
<!-- 图片会不显示 看文字切换吧老师 切换按键是Q 谢谢 tab 焦点老调到地址栏
图片会不显示 看文字切换吧老师 切换按键是Q
图片会不显示 看文字切换吧老师 切换按键是Q
图片会不显示 看文字切换吧老师 切换按键是Q
图片会不显示 看文字切换吧老师 切换按键是Q -->
<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 type="text/css">
*{
margin:0;
padding: 0;
}
div{
width: 900px;
height: 500px;
overflow: hidden;
text-align: center;
margin: 0 auto;
position: relative;
z-index: 1;
}
img{
width: 900px;
height: 500px;
}
p{
width: 900px;
height: 50px;
line-height: 50px;
color: #fff;
position: absolute;
top: 400px;
z-index: 2;
font-weight: bold;
}
span{
display:inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background:rgba(44,50,60,0.3);
cursor:pointer;
}
</style>
</head>
<body onkeydown="key(event)">
<div id="box1">
<a href="#"><img src="images/1.jpg" alt="图片1"></a>
<a href="#"><img src="images/2.jpg" alt="图片2"></a>
<a href="#"><img src="images/3.jpg" alt="图片3"></a>
<a href="#"><img src="images/4.jpg" alt="图片4"></a>
<a href="#"><img src="images/5.jpg" alt="图片5"></a>
<p>
<span onclick="clicka(0)">1</span>
<span onclick="clicka(1)">2</span>
<span onclick="clicka(2)">3</span>
<span onclick="clicka(3)">4</span>
<span onclick="clicka(4)">5</span>
</p>
</div>
<script type="text/javascript">
function clicka(num){
var box1=document.getElementById('box1');
var aimg=box1.getElementsByTagName('a');
for(var i=0;i<aimg.length;i++){
aimg[i].style.display="none";
}
aimg[num].style.display="block";
}
//x=1控制轮播图的切换,因为页面加载默认就是0,所以一开始从1循环,否则按第一下按键会没有反应
var x=1;
function key(event){
//处理浏览器兼容的，ie和其他内核浏览器处理方式不一样：一个用 ev 一个用 event
// ev 成立时 ev = event，否则 ev = ev
var ev = ev||event;
// alert(ev.keyCode);
// 判断 是否输入的是tab 是9 为了测试方便 换成了q 81 因为用tab的时候 焦点到处跑 包括地址栏等
if(ev.keyCode==81){
//判断轮播图的张数,到最后一张要回到第一张
if(x<5){
var box1=document.getElementById('box1');
var aimg=box1.getElementsByTagName('a');
for(var i=0;i<aimg.length;i++){
aimg[i].style.display="none";
}
aimg[x].style.display="block";
x++;
}
else{
x=0;
var box1=document.getElementById('box1');
var aimg=box1.getElementsByTagName('a');
for(var i=0;i<aimg.length;i++){
aimg[i].style.display="none";
}
aimg[x].style.display="block";
x++;
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
笔记
1:函数的调用:
作为一个函数来调用(不带参数/带参数/参数表达式)
myfun(); myfun(10,20);
myobj.fullName();
2:闭包
闭包就是能够读取其他函数内部变量的函数,函数的嵌套.
函数内部声明变量的时候,一定要使用var命令,如果不用的话,实际上声明了一个全局变量
子级对象会一级一级地向上寻找所有父类对象的变量,所以父对象的多有变量,对子对象都是可见的,反之则不成立
3:DOM
访问节点:
document.getElementById(id);
通过对元素的id访问,这是DOM一个基础的访问页面元素的方法,返回的是单节点
document.getElementsByName(name)
仅用于inputeradio checkbox等元素,返回名字为name的元素数组返回的事节点列表
document.getElementsByTagName(tagname)
返回具有tagname的元素列表数组,处理大的DOM结构会用到它,返回的是节点列表
获取/设置节点的属性
1:获取节点的属性
node.getAttribute(属性名)
2:设置节点的属性值
node.setAttribute(属性名,属性值)
获取/设置元素节点的内容
node.innerHTML 获取节点内容
inner.innerHTML='我是灭绝' 设置节点内容
总结 学习到了通过js控制/获取元素属性值的方法,id是单节点,class等是获取节点列表 需要遍历,学习了闭包函数,理解了子级如何调用父级的变量,练习轮播图作业,可以不看老师代码,自己敲出来,但是速度慢,依然需要加紧练习,感谢老师