3710人加入学习
(6人评价)
Web前端第三季(JavaScript)

制作完成于2018年6月14日

价格 免费
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style type="text/css">
        div{
            width:900px;
            height:400px;
            margin:0 auto;
        }
        div img{
            width:900px;
            height:400px;
        }
    </style>
    <script type="text/javascript">

        function init(){
            // window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
            window.setInterval(changeImg,2000);//循环,每隔2秒调用一次changeImg方法。
        }
        var index = 1;
        function changeImg(){
            nextImg();
        }
        function preImg(){
            myimg = document.getElementById("myimg");
            index--;
            if(index < 1){
                index = 2;
            }
            myimg.src = "img/" + index + ".png";
        }
        function nextImg(){
            myimg = document.getElementById("myimg");
            index++;
            if(index > 2){
                index = 1;
            }
            myimg.src = "img/" + index + ".png";
        }
    </script>
</head>
<body onload="init()">
    <p align="center">
        <button onclick="preImg()">上一张</button>
        <button onclick="nextImg()">下一张</button>
    </p>
    <div>
        <img src="img/1.png" id="myimg" />
    </div>
</body>
</html>

1,怎么自动调用某个函数(自动轮播)
setInterval(functionName,millisec);
2,当网页加载完成的时候,设置计时调用
onload
为什么要等网页加载完成?
只有网页加载完成了,才可以访问网页上的任何元素!
3,两种控制图片路径的方式
数组
设置固定规范的图片名称

[展开全文]

授课教师

SiKi学院老师

课程特色

下载资料(1)
视频(60)