jquery问题之animate写的轮播问题

黑魔导01 发布于 2014/03/18 10:51
阅读 2K+
收藏 0

样式、html、jquery都有了,jquery小菜鸟学习遇到的问题,用animate写的这个轮播,当从最后一张图片跳转到第一张图片的时候,瞬间又跳转到了第二张图片,百思不得其解,求大神指点迷津,不胜感激啊~~~

<style type="text/css">

*{ margin:0; padding:0}
li{ list-style:none}
img{ border:none}
.scrollUl li{ display:inline; float:left}
.scrollUl img{ width:229px; height:191px}
.scroll{ position:relative; z-index:99; height:191px; width:916px; overflow:hidden}
.scrollSec{ position:absolute; z-index:98; left:0; top:0; height:191px; width:1832px}

.scrollUl{ width:916px; height:191px; float:left;}

</style>

<div class="scroll">
    <div class="scrollSec">
        <ul class="scrollUl">
            <li><a href="#"><img src="images/online.gif" /></a></li>
            <li><a href="#"><img src="images/online1.gif" /></a></li>
            <li><a href="#"><img src="images/online2.gif" /></a></li>
            <li><a href="#"><img src="images/online3.gif" /></a></li>
        </ul>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('.scrollSec').append($('.scrollUl').clone());
var liWidth = $(".scrollUl > li").width();
var scrollUlSize = $('.scrollUl > li').size();
var index = 0;
function scroll(){ //问题:轮播走到最后一张会跳转到left为零,这时候又会立马跳转第二张图片,在第一张图片上面基本不做停留
if(index == scrollUlSize - 4){
$(".scrollSec").animate({left:"0"});
index = 0;
}
$(".scrollSec").animate({left:"-="+liWidth+"px"});
index += 1;
}
_interval = setInterval(scroll, 1000);
    _lis.hover(function() {
        clearInterval(_interval);
    },
    function() {
        _interval = setInterval(scroll, 1000);
    });
});
</script>

加载中
0
倪闯
倪闯

在if结束后面加一个else

if(index == scrollUlSize - 4){

$(".scrollSec").animate({left:"0"});
index = 0;
} else{

$(".scrollSec").animate({left:"-="+liWidth+"px"}); 

index += 1;

}

倪闯
倪闯
回复 @黑魔导01 : 哈哈,我也是菜鸟,互相学习
黑魔导01
黑魔导01
我以为会沉下去没人鸟了 感谢大神啊 大神好人撒 一生平安
返回顶部
顶部