说起来真的让人脸红，这个是我的第一个上传到网络上的代码，按理说应该写的漂亮、大体一些，然而，这些都没有达到。甚至，这段代码都不完全是我自己想出来的。不过，没办法，谁让我是一个刚刚出来的小菜鸟呢。
功能简介：这个小东西，是基于js初级、DOM基础用而写出的一个点击按钮，切换图片的功能。
个人想法拓展：基于这个功能，我想到网络上的轮播图中，点击左、右两个透明度在0.2-0.5之间的图片，就可以切换轮播图中的图片。只不过是将此案例中的---按钮-->图片而已。
或许在后续的学习中，我会发现并不是这样，那就到时候再说吧。
PS：我发现我还不会用这个开元网站，崩溃。。。我想，下一次上传代码时，我应该已经会用这个开源网站了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>图片切换</title>
<style>
img{
width:200px;
height:100px;
}
</style>
</head>
<body>
<img src="icon_1.png" id="icon"><br>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script>
window.οnlοad=function(){
var icon=document.getElementById("icon");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var maxIndex=4,minIndex=1,currentIndex=minIndex;
prev.οnclick=function(){
// alert("点击的上一张");
if(currentIndex==minIndex){
currentIndex=maxIndex;
}else{
currentIndex--;
}
icon.setAttribute("src","icon_"+currentIndex+".png");
};
next.οnclick=function(){
if(currentIndex==maxIndex){
currentIndex=minIndex;
}else{
currentIndex++;
}
icon.setAttribute("src","icon_"+currentIndex+".png");
}
}
</script>
</body>
</html>
2866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
