实现效果：
图片切换.gif
说明：这里寻找元素方式均为ID方式，且代码执行较慢（if嵌套比较多），只是就自己现在能力写的代码，其中的图片可自行更换自己喜欢的图片。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS图片切换小实例</title>
<style type="text/css">
p{margin: 0px;}
body{text-align: center;}
#frame{width: 400px;height: 400px;border: 10px solid #ccc;margin:40px auto 0; position: relative;}
/*设置整体div为400*400，边框，在屏幕水平居中且离上边40像素，相对定位*/
#frame a{width:40px; height: 40px;background: #000;border: 5px solid #fff;position: absolute;top: 175px;text-decoration: none;text-align: center;font-weight: bold;line-height: 40px;color:#fff; alpha(opacity:70);opacity: 0.7;}
#frame a:hover{filter:filter: alpha(opacity:40);opacity: 0.4;}
#front{left: 10px;}
#next{right: 10px;}
#num{width: 400px;height: 30px;background: #000;color: #fff;font-size: 14px;text-align: center;line-height: 30px; position: absolute;top: 0px;left: 0px;filter: alpha(opacity:80);opacity: 0.8;}
#word{width: 400px;height: 30px;background: #000;color: #fff;font-size: 14px;text-align: center;line-height: 30px; position: absolute;bottom: 0px;left: 0px;filter: alpha(opacity:80);opacity: 0.8;}
#img1{width:400px;height: 400px; }
strong { position:absolute; width:400px; height:30px; line-height:30px; text-align:center; top:-50px; left:0;font-weight: normal;}
</style>
<script type="text/javascript">
window.onload = function (){
var oFront = document.getElementById('front'); //<（上一张）
var oNext = document.getElementById('next'); //>（下一张）
var oNum = document.getElementById('num'); //数字
var oWord = document.getElementById('word'); //文字
var oImg = document.getElementById('img1'); //图片
var oBtn1 = document.getElementById('btn1'); //循环切换按钮
var oBtn2 = document.getElementById('btn2'); //顺序切换按钮
var oStrong = document.getElementById('strong1'); //对按钮的描述
/*
document.getElementById('XXX')是查询页面上id为XXX的元素
document.getElementsByTagName("XXX")是查询页面上所有的XXX标签元素，返回一数组列表
*/
var num = 0;//设置数字变量
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];//存放图片地址的数组
var arrWord = ['文字一','文字二','文字三','识文断字'];//存放文字的数组
var onOff = true;//设置布尔值（0/1）
oBtn1.onclick = function(){onOff = true;oStrong.innerHTML = '图片可从最后一张跳转到第一张循环切换';}
oBtn2.onclick = function(){onOff = false;oStrong.innerHTML = '图片只能到最后一张\或只能到第一张切换';}
function fnTab(){
oImg.src = arrUrl[num];
oNum.innerHTML = num+1 + '/' + arrUrl.length;
oWord.innerHTML = arrWord[num];
}//初始化
fnTab();
oFront.onclick = function(){
if(onOff){
if(num == -1){
num = 3;
}
fnTab();
num--;
}else if(num == -1){
alert('已经是第一张啦！');
}
else{fnTab();num--;}
}
oNext.onclick = function(){
if(onOff){
if(num == 3){num = -1;}
num++;
fnTab();
}else if(num == 3){
alert('已经是最后一张啦！');
}else{num++;fnTab();}
}
}
</script>
</head>
<body>
<input type="button" value="循环切换" id="btn1">
<input type="button" value="顺序切换" id="btn2">
<div id="frame">
<strong id="strong1">图片可从最后一张跳转到第一张循环切换</strong>
<a href="javascript:;" id="front"><</a>
<a href="javascript:;" id="next">></a>
<span id="num">数量加载中...</span>
<p id="word">文字加载中...</p>
<img src="" id="img1" />
</div>
</body>
</html>
小感慨：这个代码陆陆续续写了两天，写不出来的时候是真的蛮闹心的，但是都比不了写出来的成就感，也许这就是编程的魅力。
网友评论