20171208

最新推荐文章于 2023-04-18 13:53:54 发布

qunzhaoshen

最新推荐文章于 2023-04-18 13:53:54 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/qunzhaoshen/article/details/78751585

版权

元素重叠以及图片切换。

<html>
<head>
<style type="text/css">
.rule {
position:absolute; /*定义div样式大小*/
top:100px;
left:100px;
width:90%;
height:80%;

}
.rule > img{ /*定义jpg图片的宽度和高度*/
width:100%;
height:100%;
}

</style>
</head>
<body>
<div class="rule" style="z-index:1;"><img src="img/1.jpg"></div>
<div class="rule" style="z-index:5;"><img src="img/2.jpg"></div>
<div class="rule" style="z-index:4;"><img src="img/3.jpg"></div>
<div class="rule" style="z-index:3;"><img src="img/4.jpg"></div>
<div class="rule" style="z-index:2;"><img src="img/5.jpg"></div>
<script type="text/javascript">
function imgAutoChange (){
/*document.getElementsByClassName("rule");*/

var imgCols = document.getElementsByClassName("rule"); /*设置变量 / $("rule")*/
var imgColsLength = imgCols.length;
/*alert(imgColsLength);*/
for(var i = 0;i < imgColsLength;i++){
/*通过for(var i = 初始值;i < 终止值;i++){
处理代码；}*/
var zIndex = parseInt (imgCols[i].style.zIndex,10);
zIndex = zIndex + 1;
if(zIndex > imgColsLength){
zIndex = 1;
}
imgCols[i].style.zIndex = zIndex; /* 设置css的属性值*/
}
}
window.setInterval(imgAutoChange,1000); /*调试图片切换方法以及设置切换时间（1s=1000ms）*/

</script>
</body>

</html>