利用JS完成轮播图和定时弹广告
2018-06-17 本文已影响0人
矮萌杰
在介绍用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计时器写一个显示图片的函数，过了设置的时间后图片就显示，接着清楚此计时器，在创建一个新的计时器用于隐藏图片。
