求jquery图片切换效果

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

给你端代码, 参考下.

这是 每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的.

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/2772vps44.html