用js实现轮播图

用js实现轮播图
案例说明:用js实现在指定位置的图片中,图片每隔3秒会自动换另外一张图片,到了最后一张会自动跳到第一张,从头来过
分析:
第一步:先确定事件(onload())
第二步:把事件绑定一个函数
第三步:在函数里面用写一个按照指定周期实现的函数,
第四步:在指定周期函数里面,获取到指定图片的id,
第五步:修改指定图片的src值
用到的js函数:
用到的js函数:用到的js函数:
onload();某个页面或图像被完成加载
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
实例

var int=self.setInterval("clock()",50) function clock() { var t=new Date() document.getElementById("clock").value=t }



Stop interval


代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用js实现轮播图</title>
</head>
<body onload="init()">
    <img src="D:/img/1.jpg" width="100%" height="100%" id="img1">
</body>
</html>
<script type="text/javascript">
       function init(){
        setInterval("checimg()",3000);
       }

       var i=0;
       function checimg(){
            i++;
            var img1 = document.getElementById("img1");
            img1.src = "D:/img/"+i+".jpg";
            if(i==3){
                i=0;
            }
       }
   </script>

结果会每隔3秒换一次图片,每幅图片显示3秒,到第三幅时,会重新调到第一幅执行
这里写图片描述
这里写图片描述
这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_41485882/article/details/82494059