效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业3-图片切换</title>
<script src="utility.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#b-box{
border: 1px solid #000000;
height: 300px;
}
#b-box div{
border: 1px solid #000000;
display: inline-block;
margin: 50px 50px;
}
#img0{
height: 200px;
}
#s1,#s2{
border: 1px solid #000000;
height: 70px;
width: 50px;
font-size: 50px;
text-align: center;
cursor: pointer;
position: relative;
bottom: 75px;
}
#img0{
width: 200px;
}
#s1{
color: #bebebe;
}
</style>
</head>
<body>
<div id="b-box">
<div class="switch0" onclick="switchPic(0)" id="s1">
<
</div>
<div>
<img src="img-1.jpg" id="img0"/>
</div>
<div class="switch0" onclick="switchPic(1)" id="s2">
>
</div>
</div>
<script type="text/javascript">
var img_index = 1;
function switchPic(flag){
if(flag == 0){
$("img0").src = "img-" + --img_index + ".jpg";
if(img_index != 4){
$("s2").style.color = "#000000";
}
if(img_index == 1){
$("s1").style.color = "#bebebe";
}
}else{
$("img0").src = "img-" + ++img_index + ".jpg";
if(img_index != 1){
$("s1").style.color = "#000000";
}
if(img_index == 4){
$("s2").style.color = "#bebebe";
}
}
}
</script>
</body>
</html>
其中所用到的utility.js:
function $(id){
return document.getElementById(id);
}
function l(a){
console.log(a);
}
DOM练习文件:
https://download.csdn.net/download/cc2855816075/80848641