capstone2017-12-8

最新推荐文章于 2022-10-20 23:06:28 发布

2506013878

最新推荐文章于 2022-10-20 23:06:28 发布

阅读量325

点赞数

本文链接：https://blog.csdn.net/mazhuang2506013878/article/details/78753925

版权

课上讲解了JavaScript基础，新知识：驼峰大写、指定时间段调用的方法window.setInterval(方法，时间-单位毫秒);、字符串转换方法parseInt(要改变的元素，进制数);

完成作业自动轮播图，代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        .img{                       /* 设置div定位 */
            position: absolute;
            height: 475px;
            width: 80%;
        }
        .img>img {              /* 设置图片填充div */
        width: 100%;
        height: 100%;
        }
</style>
</head>
<body>
<div>
    <div class="img" id="first" style="z-index: 1"><img src="src/img/1.jpg"></div><!-- 设置五张图片 -->
    <div class="img" id="second" style="z-index: 2"><img src="src/img/2.jpg"></div>
    <div class="img" id="third" style="z-index: 3"><img src="src/img/3.jpg"></div>
    <div class="img" id="fourth" style="z-index: 4"><img src="src/img/4.jpg"></div>
    <div class="img" id="fifth" style="z-index: 5"><img src="src/img/5.jpg"></div>

</div>
<script type="text/javascript">
    function imgAutoChange() {                  //创建方法imgAutoChange
        var imgClass = document.getElementsByClassName("img");          //获取div元素
        var imgClassLength = imgClass.length;                           //遍历div数量
        for (var i = 0; i < imgClassLength; i++) {                      //循环
            var zIndex = parseInt(imgClass[i].style.zIndex,10);         //parseInt(字符串，进制数)
            zIndex=zIndex+1;
            if (zIndex > imgClassLength) {                              //判断
                zIndex = 1;
            }
            imgClass[i].style.zIndex= zIndex;                           //把新的值返回给div的属性
        }
    }

    window.setInterval(imgAutoChange,1000);           //设置指定时间段调用方法 window.setInterval(方法名，时间单位毫秒)

</script>
</body>
</html>

2506013878

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
capstone2017-12-8

课上讲解了JavaScript基础，新知识：驼峰大写、指定时间段调用的方法window.setInterval(方法，时间-单位毫秒);、字符串转换方法parseInt(要改变的元素，进制数);完成作业自动轮播图，代码： .img{ /* 设置div定位 */ positio
复制链接

扫一扫