如何用jquery循环显示元素中的内容
内容如下:<ul><liclass="picPanel"><imgsrc="1.jpg"></li><liclass="picPanel"><imgsrc="2.jpg"...
内容如下:
<ul>
<li class="picPanel"><img src="1.jpg"></li>
<li class="picPanel"><img src="2.jpg"></li>
<li class="picPanel"><img src="3.jpg"></li>
<li class="picPanel"><img src="4.jpg"></li>
<li class="picPanel"><img src="5.jpg"></li>
<li class="picPanel"><img src="6.jpg"></li>
</ul>
现在要求用jquery循环显示li元素中的图片(通过透明度和z-index来显示),当页面加载完成后默认显示第一张图片,然后开始循环显示,我自己写的代码有问题,代码如下:
$(function(){
$(".picPanel").first().css({opacity:"1", "z-index":"1"});
var i = 1, t = $(".picPanel").length - 1, tmp = setInterval(function(){
$(".picPanel").animate({"z-index":"0", opacity:"0"},200).eq(i < t ? i++ : i = 0).animate({"z-index":"1", opacity:"1"},200);
}, 3000);
}); 展开
<ul>
<li class="picPanel"><img src="1.jpg"></li>
<li class="picPanel"><img src="2.jpg"></li>
<li class="picPanel"><img src="3.jpg"></li>
<li class="picPanel"><img src="4.jpg"></li>
<li class="picPanel"><img src="5.jpg"></li>
<li class="picPanel"><img src="6.jpg"></li>
</ul>
现在要求用jquery循环显示li元素中的图片(通过透明度和z-index来显示),当页面加载完成后默认显示第一张图片,然后开始循环显示,我自己写的代码有问题,代码如下:
$(function(){
$(".picPanel").first().css({opacity:"1", "z-index":"1"});
var i = 1, t = $(".picPanel").length - 1, tmp = setInterval(function(){
$(".picPanel").animate({"z-index":"0", opacity:"0"},200).eq(i < t ? i++ : i = 0).animate({"z-index":"1", opacity:"1"},200);
}, 3000);
}); 展开
2个回答
展开全部
javascript:
$(function(){
var li = $('li'),
len = li.size() - 1,
n = 0,
outIndex = 0;
function fade(){
li.eq(n).fadeIn();
outIndex = (n - 1) < 0 ? len : n - 1;
li.eq(outIndex).fadeOut();
if(n < len){
n++
}else{
n = 0;
}
}
fade();
setInterval(function(){
fade();
},2000);
})
css:
ul{
position: relative;
}
li{
display: none;
position: absolute;
top:0;
left: 0;
}
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
图片在<img>节点标签上,不在<li>节点标签上,所以说定位错了
追问
这个不关图片的事,之前对li设置z-index:0,opacity:0,我现在让他变成1达到循环播放的目的
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询