利用JS完成轮播图和定时弹广告

在介绍用JS完成轮播图和定时弹广告的方法前，先介绍一个常用的切图功能（点击一个按钮，就切换到下一张图片）。
首先，确认事件：鼠标单击事件。

<input type="button" value="next" onClick="xx()">
<img src="img/1.jpg" id = "img" />

为图片命ID名，方便在写JS代码的时候能获取图片的路径。

JS代码：

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

1.一般轮播图或点击切图图片的命名都为有规律的数字，以便可以用变量来表示，并且可通过自增来改变变量从而切换图片。
2.为onClick绑定一个函数（function xx()）。
3.增加最后一个if条件判断的语句，让变量 i 在超过图片数量的时候，返回0，然后进行自增，又跳回到第一张图片，避免出现无图显示的情况。

下面介绍轮播图：
html:

<body onload="init()">
<img src="img/1.jpg" id = "img" />

轮播图要在进入页面的时候就看到并且能进行切换，所以就时间放在body部分，并且为加载事件。

<script>
  function init(){
  setInterval("changeImg()",3000);
 }

var i = 0;
function changeImg(){
i++;
document.getElementById("img").src = "img/"+i+".jpg";
if(i==3){
      i = 0;
    }
 }

此处就涉及到新的DOM方法：setInterval
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：
setInterval(code,millisec)

参数图.png

下面是定时弹广告并隐藏：
html(与轮播图一样)

<body onload="init()">
<img src="img/1.jpg" id = "img" />

css:默认值为隐藏

#img{
  display:none;
  }

js部分：

    </style>
    <script>
    function init(){
    time = setInterval("showAd()",3000);
    }
    
    function showAd(){
    var a = document.getElementById("img");
    a.style.display = "block";
    clearInterval(time);
    time = setInterval("hidden()",3000);
    }

    function hidden(){
    document.getElementById("img").style.display = "none";
    clearInterval(time);
    }
    </script>

此处又多了一个clearInterval()：
该函数用于清除计时器，用法与setInterval一样，需要一个函数和时间。
该功能先默认图片隐藏，然后用setInterval计时器写一个显示图片的函数，过了设置的时间后图片就显示，接着清楚此计时器，在创建一个新的计时器用于隐藏图片。

利用JS完成轮播图和定时弹广告

推荐阅读更多精彩内容