您的位置：首页 > 其它

实现点击图片下标切换图片

2015-11-12 17:31 399 查看

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 onmouseover="changeImage(this)" style="background-color:red;">1</li>

<li onmouseover="changeImage(this)" style="background-color:#3E3E3E;">2</li>

<li onmouseover="changeImage(this)" style="background-color:#3E3E3E;">3</li>

<li onmouseover="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 =
abd6
0; j < imgs.length; j++) {

imgs[j].style.display = "none";

}

}

4、所需图片略，注：图片为大小相同的多张。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航