主要使用setInterval方法设置更新周期,clearInterval清除周期。(如果不清除会一直周期循环执行下去,而setTimeout只是在指定时间后执行一次,这里完全可以替换为setTimeout方法)
一、js首页轮播
第一步:确定事件(onload)并为其绑定一个函数
浏览器是边加载边执行的,先加载head 再加载body。了解body的onload事件的执行时间是非常重要的。onload事件是在网页加载完毕时执行的。当我们在JavaScript中想要操作某元素时而此元素还没有加载完成(即没有这个元素),就会出现此元素没定义。在body中添加onload事件是指所有的元素都加载完成时触发此事件。而元素中的onload事件是指此元素加载完成时触发。所以操作代码最好放在onload事件中。onload()此事件只能写一次并且放到body标签中。
第二步:书写绑定的这个函数
第三步:书写定时任务(setInterval)
第四步:书写定时任务里面的函数
第五步:通过变量的方式,进行循环(获取轮播图的位置,并设置 src 属性)
<script type="text/javascript">
function init() {
//书写轮播图片显示的定时操作
setInterval("changeImage()",3000);
}
//书写函数
var i = 0;
function changeImage() {
i++;
//获取图片位置并设置src属性值
document.getElementById("images").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
<body onload="init()">
<!-- 轮播图 -->
<div id="lunbo">
<img alt="加载中" src="../img/1.jpg" width="100%" id="images">
</div>
</body>
二、js广告图片定时弹出
第一步:在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步:确定事件(onload)并为其绑定一个函数
第三步:书写这个函数(设置一个显示图片的定时操作)
第四步: 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步:清除显示图片的定时操作()
第六步:书写隐藏图片的定时操作
第七步:书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步:清除隐藏图片的定时操作()
html
<body onload="init()">
<img id="imgAd" alt="" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" style="display: none">
js
function init() {
//设置显示广告图片的定时操作
time = setInterval("showAd()", 3000);
}
//书写函数
function showAd() {
//获取图片广告位置
var adEle = document.getElementById("imgAd");
//修改图片广告属性让其显示
adEle.style.display = "block";
//清除显示图片的定时操作
clearInterval(time);
//设置隐藏图片的定时操作
time = setInterval("hiddenAd()", 3000);
}
function hiddenAd() {
////设置隐藏图片
document.getElementById("imgAd").style.display = "none";
clearInterval(time);
}
三、JQuery实现首页轮播和广告图片定时弹出
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
time = setInterval("showAd()", 3000);
setInterval("changeImage()", 3000);
});
var i = 0;
function changeImage() {
i++;
//获取图片位置并设置src属性值
$("#images").attr("src","../img/" + i + ".jpg");
if (i == 3) {
i = 0;
}
}
function showAd(){
//获取图片广告位置,修改图片广告属性让其显示
$("#imgAd").show();
//清除显示图片的定时操作
clearInterval(time);
//设置隐藏图片的定时操作
time = setInterval("hiddenAd()", 3000);
}
function hiddenAd() {
//设置隐藏图片
$("#imgAd").hide();
clearInterval(time);
}
</script>