c语言写图片轮播,js编写轮播图，广告弹框

1.轮播图

js编写轮播图，需要用到setInterval(计时器)；先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的；如：banner1.jpg，banner2.jpg，banner3.jpg；

(图片宽度自己设置，宽高与div的大小一致，确定填充满)

js编写轮播图图片变换函数

var i=1;

function changeImg(){

i++;

document.getElementById("banner").src="img/banner"+i+".jpg";//通过id名获得标签img并修改img的src属性的值，通过改变i的值来改变图片

if(i==3){　　　　//当i等于3时，结束一轮循环，重新给i赋值为0；下一次i++；给i赋值为1，img变为第一张图片

i=0;

}

}

//2 给函数添加计时器

function init{　　　　//定义初始化函数

setInterval("changeImg()",3000); //给changeImg();函数添加计时器，每过3000毫秒执行一次；

}

在

标签中添加onload事件，文档加载完执行函数init(),写法如下：;

2.广告弹框

广告弹框与上面写的一样，也是利用计时器，加载完页面后过一段时间，就弹出广告，然后过一段时间在自动关闭，需要设置计时器，页面加载完后三秒后显示广告，并清除显示计时器，重新定义隐藏计时器，三秒后隐藏，代码如下

function init(){

time=setInterval("showimg()",3000);

}

function showimg(){

var el=document.getElementById("ad");

el.style.display="block";

clearInterval(time);　　　　　　//清除显示计时器，并重新定义隐藏计时器，三秒后隐藏图片

time=setInterval("hiddenimg()",3000);　　//也可以在init()函数中直接定一两个计时器，一个三秒钟后显示，一个定义六秒钟后小时，两种方式效果一样

}

function hiddenimg(){

document.getElementById("ad").style.display="none";

clearInterval(time);

}

下面写一个轮播图图片数字随图片变化的代码：

Bannerchangeimg();

$("#menu").navfix(0,999);

})functionBannerchangeimg(){var num=$("#banner li");var img=$("#banner img");var index=7;

setInterval(function(){

num.click(function(){

index=$(this).html();

img.prop("src","img/flash/"+index+".jpg");

$(this).addClass("selected").siblings().removeClass("selected");

});

img.prop("src","img/flash/"+index+".jpg");var linum=index-1;var selected=num[linum];

$(selected).addClass("selected").siblings().removeClass("selected");

index++;if(index==8){

index=1;

}

},3000);

}

html文件

• 1
• 2
• 3
• 4
• 5

6

7