不多说先上代码 很简单 适合新手练习
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
//清除默认样式
margin: 0;
padding: 0;
}
#outer{
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: yellowgreen;
/*设置文本居中*/
text-align: center;
}
#outer1{
width: 500px;
margin: 50px auto;
padding: 100px;
background-color: yellowgreen;
/*设置文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="outer">
<p id="info">一共5张图片,当前第1张</p>
<img src="img/1.jpg" alt="冰棍">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
<div id="outer1">
<button id="btn">电我</button>
<ul id="city">
<li id="li">dd</li>
<li>ss</li>
<li>gf</li>
<li>gg</li>
</ul>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Javascript
这里用数组存储img的src 通过改变src实现更换图片
/*
* 切换图片改 src
*
*/
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var img = document.getElementsByTagName("img")[0];
var info = document.getElementById("info");
//设置提示文字
//计数器
var index = 0;
//创建数组存路径
var imgArray = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
prev.onclick = function () {
index--;
if (index < 0 ) {
index = imgArray.length - 1;
}
img.src = imgArray[index];
info.innerHTML = "共"+(imgArray.length)+"张图片,当前第"+(index+1)+"张图片";
};
next.onclick = function () {
// alert("下一张");
index++;
if (index > imgArray.length - 1 ) {
index = 0;
}
img.src = imgArray[index];
info.innerHTML = "共" + (imgArray.length) + "张图片,当前第" + (index+1) + "张图片";
};
/*
* childNodes 属性会获取包括文本节点在内的所有子节点
* 根据DOM标签 标签间的换行空白也会当为文本节点
* 注意 IE8以下不会把空白当成文本节点
* */
var btn = document.getElementById("btn");
var city = document.getElementById("city");
var cns = city.childNodes;
/*
* children属性可以获取所有子节点 不包括空白文本节点
* */
var cns2 = city.children;
alert(cns2.length);
效果图