当前位置: 代码迷 >> 综合 >> 上下滚动播放 左右轮播
  详细解决方案

上下滚动播放 左右轮播

热度:45   发布时间:2023-10-24 10:09:46.0

jQuery上下滚动自动轮播代码:

html:

<div id="slider_1"><ul><li>AAA</li><li>BBB</li><li>CCC</li></ul>
</div>

function timer(opj){
        

        $(obj).find("ul:first").animate({

                marginLeft:"-40px" //左右轮播

                marginTop:"-40px"//上下轮播

            },500,function(){

                $(this).css({marginLeft:"0px"}).find("li:first").appendTo(this); //左右轮播

                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);//上下轮播

                //$(this).css("marginTop","0px"):因为在ul向上移40px的时候,其第一个li会添加到ul的末尾,如果ul的marginTop不设为0的话,整个ul就会慢慢移出它的父盒子,最后使得它的父盒子变空。

        });
}
$(function(){ 
        var num = $('# slider_1 ul').find('li').length;
if(num > 1){

var time=setInterval('timer("#slider_1")',3500);

$('#slider_1 li').mousemove(function(){

                         //鼠标移入停止轮播

clearInterval(time);

}).mouseout(function(){

                        //鼠标移出开始轮播

time = setInterval('timer("# slider_1")',3500);
}); 
}
});
  相关解决方案