JS中DOM对象的使用
JS修改className样式
案例思路：
演示案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
div {
width:218px;
height:218px;
border:1px solid red;
margin:50px auto;
}
/* 通过类选择器预置样式，然后通过js判断
改变样式的条件，当条件达成时，通过
修改className来改变样式。这种方式
是修改样式的经典用法。 */
.show {
display:inline-block;
}
.hide {
display:none;
}
</style>
</head>
<body>
<!--
onmouseover是鼠标悬停事件;
onmouseout是鼠标离开事件;
-->
<div id="d1"
οnmοuseοver="pause1();"
οnmοuseοut="lunbo();">
<img alt="" src="../images/01.jpg" class="show">
<img alt="" src="../images/02.jpg" class="hide">
<img alt="" src="../images/03.jpg" class="hide">
<img alt="" src="../images/04.jpg" class="hide">
<img alt="" src="../images/05.jpg" class="hide">
<img alt="" src="../images/06.jpg" class="hide">
</div>
<script type="text/javascript">
var id= null;
//轮播次数
var index = 0;
//声明轮播函数
function lunbo(){
//每2s轮播一次
id = setInterval(function(){
index++;
//将所以的图片隐藏
var div = document.getElementById("d1");
var imgs = div.getElementsByTagName("img");
for(var i=0;i<imgs.length;i++){
imgs[i].className = "hide";
}
//将下一个图片显示
var next = index%imgs.length;
imgs[next].className = "show";
},2000);
}
//页面加载完成后[调用轮播函数]
lunbo();
//暂停轮播
function pause1(){
clearInterval(id);
}
</script>
</body>
</html> 最终页面显示效果：
每隔2s循环显示图片，鼠标悬停在图片上时，轮播暂停，离开时图片又开始轮播。
6717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
