js编写轮播图，广告弹框
1.轮播图
js编写轮播图，需要用到setInterval(计时器)；先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的；如：banner1.jpg，banner2.jpg，banner3.jpg；
<div>
<img src="img/banner1.jpg" id="banner" />(图片宽度自己设置，宽高与div的大小一致，确定填充满)
</div>
js编写轮播图图片变换函数
<script>
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毫秒执行一次；
}
在<body>标签中添加onload事件，文档加载完执行函数init(),写法如下：<body onload="init()">;
</script>
2.广告弹框
广告弹框与上面写的一样，也是利用计时器，加载完页面后过一段时间，就弹出广告，然后过一段时间在自动关闭，需要设置计时器，页面加载完后三秒后显示广告，并清除显示计时器，重新定义隐藏计时器，三秒后隐藏，代码如下
<script type="text/javascript">
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);
}
</script>
下面写一个轮播图图片数字随图片变化的代码：
<script> $(function(){ Bannerchangeimg(); $("#menu").navfix(0,999); }) function Bannerchangeimg(){ 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); } </script>
html文件
<div id="banner"> <img src="img/flash/6.jpg"/> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li class="selected">6</li> <li>7</li> </ul> </div>
