<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Js demo1 </title>
<style>
body {margin: 10px; padding: 10px; background-color: pink;}
img {width: 400px;height: 400px; border: 2px solid rgba(255, 255, 255, 0.2);border-radius: 4px;vertical-align:top;}
#box { width: 470px; height: 150px; position: relative; margin: 30px auto; overflow: hidden;}
ul li {width: 470px;}
ol {z-index: 2; width: 120px; position: absolute; right: 10px;bottom: 10px;}
ol li {width: 20px; height: 20px; float: left;margin: 0 2px; display: inline; background:#fff;
color: green; line-height: 20px; text-align: center;
}
ol.active {background: #f60; color: red;}
</style>
<script>
window.onload = function() {
var oUl = document.getElementsByTagName('ul')[0];
var aLiUl = oUl.getElementsByTagName('li');
var oOl = document.getElementsByTagName('ol')[0];
var aLiOl = oOl.getElementsByTagName('li');
for(var i = 0; i < aLiOl.length; i++) {
aLiOl[i].index = i;
aLiOl[i].onmouseover = function() {
for (var i = 0; i < aLiOl.length; i++) {
aLiOl[i].className = '';
aLiUl[i].style.display = 'none';
}
this.className = 'active';
aLiUl[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="box">
<ul>
<li style="display:block"><img src="images/cherry.jpg" alt=""></li>
<li><img src="images/orange.jpg" alt=""></li>
<li><img src="images/apple.jpg" alt=""></li>
<li><img src="images/pipa.jpg" alt=""></li>
<li><img src="images/peach.jpg" alt=""></li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>获取焦点demo(一)
最新推荐文章于 2022-08-23 11:40:36 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
