Question

求jquery图片切换效果

<div class="banner" id="banner">
<img src="{$appimgdir}banner01.png" />
<img src="{$appimgdir}banner02.png" />
</div>
就是说#banner里面的图片 每隔一段时间就切换一次，
可能以后还会加图片，不一定就是两张
我猜是不是用setInterval函数写的，
不需要鼠标触发事件，页面加载后直接开始切换就行了，
也不用什么渐变淡入的效果

Answer 1

给你端代码, 参考下.

这是 每2秒切换div的, 你将图片放到div就直接ok了.

<style>
.ads{
	width:100px;
	height:100px;
}
</style>
<div class='ads' id='ads0' style='background-color:red'/>
<div class='ads' id='ads1' style='background-color:blue'/>
<div class='ads' id='ads2' style='background-color:yellow'/>
<div class='ads' id='ads3' style='background-color:cyan'/>
<div class='ads' id='ads4' style='background-color:black'/>
<script>
var curid=0;
$(".ads").hide();
// 选中所有 含类 .ads 的div, 并隐藏之;
setInterval(function(){
    var adi=(curid++) %5 ;
    // 当前要显示的 div
    $("#ads"+adi).show();
}, 2000);
// 2秒切换一次.
</script>

追问

显示到第二张图片的时候能让第一张图片隐藏吗？

追答

<div class='ads' id='ads0' style='background-color:red'/>

这些, 改成 :

<div class='ads' id='ads0'>
   <img src=''>
</div>

即可. 你拷贝粘贴试验下呗.

追问

现在第一张显示出来了，然后到第二张显示出来的时候，第一张能不能隐藏掉啊，就显示一张图片

追答

完善了下代码.

<style>
.ads{
width:100px;
height:100px;
display:none;
}
</style>
<div class='ads' id='ads0' style='background-color:red'><img src='1.png'></div>
<div class='ads' id='ads1' style='background-color:blue'><img src='2.png'></div>
<div class='ads' id='ads2' style='background-color:yellow'/>
<div class='ads' id='ads3' style='background-color:cyan'/>
<div class='ads' id='ads4' style='background-color:black'/>
<script>
var curid=0;
var imgcnt = 5;
setInterval(function(){
  $("#ads"+curid).hide();
    curid=(++curid) % imgcnt ;
    $("#ads"+curid).show();
}, 2000);
</script>

测试OK的.

Answer 2

//发个邮箱地址给我，闲暇时写了个插件，正好发给你参考

追问

能用简单的代码实现吗，按jquery的来，
不想用别的封装库了

追答

这个就是我自己用jquery写的插件啊。用到的库就只是jquery，其余的都是我自己写的代码

追问

我就要自动切换的效果 按钮这些都不要
，先谢谢你了，不过这个类似的素材网站上也能找到，

Answer 3

var count=1;
jQuery(function (){
aaa();
});
function aaa(){
jQuery("#banner img").hide();
jQuery("#banner img:eq("+(count-1)+")").show();
if(count==jQuery("#banner img").length)
count=1;
else
count++;
setTimeout("aaa()",1000);
}
//fadeIn() 淡入 fadeOut() 淡出