jquery实现简单的图片切换
2010年9月8日
最近帮朋友写了一个广告的切换，用jquery写的，要求在一个页面放多个广告切换，为了方便调用，就直接把js封装到了一个函数内，然后函数带一个参数，传递不同的参数即可，代码很简洁，还是归功于jquery的强大，下面是具体的代码部分，。
js代码：
<script type="text/javascript">
$(function(){
function adPlay(tagId){ //创建adPlay并带一参数
$(tagId).children().eq(0).show(); //获取第一个子标签，让其显示
var len = $(tagId).children().length;//获取子标签的数量赋值给len
var index = 0;//声明变量index 值为0
var playImg = setInterval(function(){ //自动切换图片
showImg(index);
index++
if(index===len){index=0}
},3000);
function showImg(i){ //显示索引的当前图片,隐藏同辈的图片
$(tagId).children().eq(i).show().siblings().hide();
}
}
adPlay('#banner1');
adPlay('#banner2');
});
</script>
html代码：
<div id="banner1">
<div>
<a href="http://www.chmta.net" target="_blank"><img class="imgbk" src="http://img.xywy.com/xwzx/news/zhxx/images/banner12.jpg" /></a>
</div>
<div>
<a href="http://www.cihexpo.com/" target="_blank"><img class="imgbk" src="http://img.xywy.com/xwzx/news/zhxx/images/banner13.jpg" /></a>
</div>
</div>
<br />
<br />
<br />
<hr />
<br />
<br />
<br />
<div id="banner2">
<p>
<a href="http://www.chmta.net" target="_blank"><img class="imgbk" src="http://img.xywy.com/xwzx/news/zhxx/images/banner12.jpg" /></a>
</p>
<p>
<a href="http://www.cihexpo.com/" target="_blank"><img class="imgbk" src="http://img.xywy.com/xwzx/news/zhxx/images/banner13.jpg" /></a>
</p>
</div>
下面是实例，可以运行查看效果：
提示：你可以先修改部分代码再运行。
如有不合理的地方望大家给予批评指正，期待您提出更好的解决方案！
分类: jquery