1、html文本：
<!DOCTYPE HTML>
<html>
<head>
<title>点击图片下标切换图片</title>
<link href="css/imageNum.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="js/imageNum.js"></script>
</head>
<body>
<div class="changeImg3-div">
<img src="images/door1.png"/>
<img src="images/door2.png" style="display:none;"/>
<img src="images/door3.png" style="display:none;"/>
<img src="images/door4.png" style="display:none;"/>
<div>
<ul>
<li οnmοuseοver="changeImage(this)" style="background-color:red;">1</li>
<li οnmοuseοver="changeImage(this)" style="background-color:#3E3E3E;">2</li>
<li οnmοuseοver="changeImage(this)" style="background-color:#3E3E3E;">3</li>
<li οnmοuseοver="changeImage(this)" style="background-color:#3E3E3E;">4</li>
</ul>
</div>
</div>
</body>
</html>
2、CSS脚本：
*{
margin:0px;
padding:0px;
}
li {
display: inline-block;
width: 20px;
height: 20px;
margin: 0px 2px;
border-radius: 50%;
text-align: center;
color: #FFF;
}
.changeImg3-div{
width:475px;
margin-left:30%;
position:relative;
border:1px solid red;
}
.changeImg3-div div{
position:absolute;
z-index:5;
opacity: 0.9;
top:440px;
left:180px;
}
3、JS脚本：
// 获取所有图片标签对象数组
var imgs = document.getElementsByTagName("img");
/*
* 当鼠标移动到图片下标对象，改变对应下标背景颜色，并切换到对应图片
*/
function changeImage(li) {
initLiImg();
li.style.backgroundColor = "#3E3E3E";
li.style.cursor = "default";
for (var i = 1; i <= imgs.length; i++) {
if (i == li.innerHTML) {
initImgsDisplay();
imgs[i - 1].style.display = "block";
}
}
}
/*
* 初始化图片下标按钮的颜色
*/
function initLiImg() {
var liNums = document.getElementsByTagName("li");
for (var i = 0; i < liNums.length; i++) {
liNums[i].style.backgroundColor = "red";
}
}
/*
* 初始化图片隐藏状态，所有图片出于隐藏
*/
function initImgsDisplay() {
for (var j = 0; j < imgs.length; j++) {
imgs[j].style.display = "none";
}
}
4、所需图片略，注：图片为大小相同的多张。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
