写一个图片切换的小案例，巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值，如果属性已经存在则更改属性值。
方法： 将图片放入数组中首先给img一个初始值，使用index存放当前被点击图片的下标，当再一次点击时，下标+1赋值给数组下标，利用setAttribute()方法给img标签设置src属性。上一张效果反之，代码如下。
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<style type="text/css">
?? ??? ?img {
?? ??? ??? ?width: 400px;
?? ??? ??? ?height: 400px;
?? ??? ??? ?display: block;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<img src="imgs/t11.jpg" alt="" id="img">
?? ??? ?<button type="button" id="prev">上一张</button>
?? ??? ?<button type="button" id="next">下一张</button>
?? ?</body>
?? ?<script type="text/javascript">
?? ??? ?var imgs = document.getElementById("img")
?? ??? ?var nextBtn = document.getElementById("next")
?? ??? ?var prevBtn = document.getElementById("prev")
?? ??? ?var imgArr = [
?? ??? ??? ?"imgs/t11.jpg",
?? ??? ??? ?"imgs/doraemon.jpg",
?? ??? ??? ?"imgs/peiqi.jpg",
?? ??? ??? ?"imgs/qiang.jpg"
?? ??? ?]
?? ??? ?var index = 0;
?? ??? ?nextBtn.onclick = function() {
?? ??? ??? ?index++;
?? ??? ??? ?if (index > imgArr.length - 1) {
?? ??? ??? ??? ?index = 0
?? ??? ??? ?}
?? ??? ??? ?imgs.setAttribute("src", imgArr[index])
?? ??? ?}
?? ??? ?prevBtn.onclick = function() {
?? ??? ??? ?index--
?? ??? ??? ?if (index < 0) {
?? ??? ??? ??? ?index = imgArr.length - 1
?? ??? ??? ?}
?? ??? ??? ?imgs.setAttribute("src", imgArr[index])
?? ??? ?}
?? ?</script>
</html>
实现效果为当点击下一张图片切换至数组中的下一张，点击上一张切换至数组中的下一张
初始界面为
点击下一张效果为
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did123817