js实现轮播图

轮播图的实现主要是BOM中window窗口对象里面的与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数:
1. js代码或者方法对象
2. 毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
步骤
0.准备几张图片
1.在页面上使用img标签展示图片
2.定义一个方法.修改图片对象的src属性,来实现更改的图片的功能
3.定义一个定时器,每隔一段时间使用一次方法


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>


<img id="img" src="img/banner_1.jpg" width="100%">

<script>


    var i=1;
    function fun() {
      
        i++;
        if(i>3){
      
            i=1;
        }
        var img = document.getElementById("img");
        img.src="img/banner_"+i+".jpg";

    }

    setInterval(fun,2000);
script>

body>
html>

你可能感兴趣的:(前端)