jquery图片上下轮播的问题，怎么实现自动轮播？
functionpicTurn(elementId){var$top=parseInt($(elementId).css('top'));if($top<-1140){$...
function picTurn(elementId){
var $top = parseInt($(elementId).css('top'));
if ($top<-1140) {
$top=0;
};
$top -=228;
$top +='px';
$(elementId).animate({top:$top},"slow");
}
$(document).ready(function() {
picTurn('#picShow');
});
我在id为picShow中，放了我想要的5张图片，然后通过改变他的top数值来产生位移，以上代码可以实现将他从top=0px到top=-228px;的动画， 但是我想让他自动轮播，就是top依次变成-228，-456，-674……以此类推，当到第五张时从头开始，请问怎么弄？我知道应该要用到settimeout之类的，但是不会用…… 展开
var $top = parseInt($(elementId).css('top'));
if ($top<-1140) {
$top=0;
};
$top -=228;
$top +='px';
$(elementId).animate({top:$top},"slow");
}
$(document).ready(function() {
picTurn('#picShow');
});
我在id为picShow中，放了我想要的5张图片，然后通过改变他的top数值来产生位移，以上代码可以实现将他从top=0px到top=-228px;的动画， 但是我想让他自动轮播，就是top依次变成-228，-456，-674……以此类推，当到第五张时从头开始，请问怎么弄？我知道应该要用到settimeout之类的，但是不会用…… 展开
3个回答
展开全部
1、html部分
<body>
<div id="banner">
<div id="banner_bg"></div><!--标题背景-->
<div id="banner_info"></div><!--标题-->
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="imgs/p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
<a href="#" target="_blank"><img src="imgs/p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
<a href="#" target="_blank"><img src="imgs/p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
<a href="#" target="_blank"><img src="imgs/p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"/></a>
</div>
</div>
</body>
2、css样式部分
<style type="text/css">
#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer; width:478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
</style>
3、jQuery部分
<script type="text/javascript">
var t = n =0, count;
$(document).ready(function(){
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
$("#banner li").click(function() {
var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
n = i;
if (i >= count) return;
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})
function showAuto()
{
n = n >=(count -1) ?0 : ++n;
$("#banner li").eq(n).trigger('click');
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果你上面没有写错的话，并且不需要鼠标移入时暂停自动轮播效果的话，可以使用setInterval
$(document).ready(function() {
setInterval(function(){
picTurn('#picShow');
}, 3000);
});
$(document).ready(function() {
setInterval(function(){
picTurn('#picShow');
}, 3000);
});
更多追问追答
追问
没错。后来，我再试试setInterval，是可以成功了，但是，当位移到第五张时突然变到第一张太生硬了，请问有没有解决方法，就是直接第五张到第一张，才能不突兀
追答
可以的，把第一张图clone添加到末尾，然后判断条件那儿 if ($top<-1140) { 改成 if ($top<-1368) {
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以每移动一次就将第一张图片"剪切"到末尾.(clone,remove)
但为什么不找个轮播插件用呢
但为什么不找个轮播插件用呢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
