web点击按钮切换照片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
i{
font-style: normal;
}
#wrap{
position: relative;
width: 600px;
height: 400px;
margin: 50px auto;
}
.title,.num{
position: absolute;
width: 100%;
left: 0;
line-height: 30px;
text-align: center;
z-index: 99;
color: #FFF;
background-color: rgba(0,0,0,.5);
}
.num{
top:0;
}
.title{
bottom: 0;
}
ul li{
position: absolute;
display: none;
top:0;
left:0;
width: 100%;
height: 400px;
}
ul li.on{
display: block;
}
ul li img{
width: 100%;
height: 100%;
overflow: hidden;
}
.btn span{
position: absolute;
padding: 15px 10px;
color: #FFF;
top:50%;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
}
.btn .left{
left: 0;
}
.btn .right{/*没有留空格导致边缘按钮错误*/
right:0;
}
</style>
</head>
<body>
<div id="wrap">
<div class="num">西湖十景---第<i>一</i>站</div>
<ul>
<li class="on"><img src="images/01.png" alt=""></li>
<li><img src="images/02.png" alt=""></li>
<li><img src="images/03.png" alt=""></li>
<li><img src="images/04.png" alt=""></li>
<li><img src="images/05.png" alt=""></li>
<li><img src="images/06.png" alt=""></li>
<li><img src="images/07.png" alt=""></li>
<li><img src="images/08.png" alt=""></li>
<li><img src="images/09.png" alt=""></li>
<li><img src="images/10.png" alt=""></li>
</ul>
<div class="btn">
<span class="left"><</span>
<span class="right">></span>
</div>
<div class="title">断桥残雪</div>
</div>
<script>
let aLi = document.getElementsByTagName("li"),
aSpan = document.getElementsByTagName("span"),
oTitle = document.getElementsByClassName("title")[0],//getElementsByClassName写成getElementsByTagName导致下面的自不变*/
oI = document.getElementsByTagName("i")[0],
length = aLi.length,
i = 0,
arr1 = ["一","二","三","四","五","六","七","八","九","十"],
arr2 = ["断桥残雪","南屏晚钟","花港观鱼","柳浪闻莺","双峰插云","三潭映月","雷峰塔","苏提春晓","平湖秋月","曲院风荷"];/*分号中英文没分*/
aSpan[1].onclick=function(){
aLi[i].className="";
i++;
if(i>=length){
i=0;
}
aLi[i].className="on";
oI.innerHTML=arr1[i];
oTitle.innerHTML= arr2[i];
}
aSpan[0].onclick=function(){
aLi[i].className="";
i--;
if(i<0){
i=length-1;
}
aLi[i].className="on";
oI.innerHTML=arr1[i];
oTitle.innerHTML= arr2[i];
}
</script>
</body>
</html>
因为理解不透彻，先将书上的代码抄一遍运行实验，运行结果失败，主要错误和梳理代码一编后学习的知识点如下：
错误1：并未向课本一样展示，而是铺满页面。原因：class与id使用混乱。class在编辑属性时使用. id在编辑属性时使用#。
错误2：.btn. left和.btn. right抄成.btn.left和.btn.right 导致运行时两个箭头重叠，具体原因有待研究。
错误3：中英文输入法未切换；;没有区分。
结论：写代码要规范，认真。一点点小错也会让所有代码不运行。连照着抄都不能写对，更何况自己写代码呢？
知识点1：
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
知识点2：
rgba() 函数使用 Red-green-blue-alpha (RGBA) 模型定义颜色。
RGBA 颜色值是 RGB 颜色值的扩展，它带有可指定颜色不透明度的 alpha 通道。
知识点2：
overflow 属性规定当内容溢出元素框时发生的事情。
学习了一天，希望每天如此，希望还不算晚。回宿舍睡觉了。
浙公网安备 33010602011771号