幻灯片平滑过渡代码

#myslidebox{

width:100%;

height:100%;

background:#ccc;

}

#myslideboxshow{

width:100%;

height:100%;

position:relative;

overflow:hidden;

}

#myslideboxshow li{

position:absolute;

width:100%;

height:100%;

left:100%;

top:0;

}

#myslideboxshow li img{

width:100%;

height:100%;

}

    var slidesubnumber = $('#myslideboxshow').children().length;

    var i = 0;//显示当前的图片

    function slide(){

    $("#myslideboxshow").find("li").css({"left":"100%","z-index":"1"});

    if(i == 4){

    $("#myslideboxshow").find("li").eq(4).css({"left":"0px","z-index":"2"}).animate({"left":"-100%"});

    $("#myslideboxshow").find("li").eq(0).css({"left":"100%","z-index":"4"}).animate({"left":"0px"});

    }else{

    $("#myslideboxshow").find("li").eq(i).css({"left":"0px","z-index":"2"}).animate({"left":"-100%"});

    $("#myslideboxshow").find("li").eq(i+1).css({"left":"100%","z-index":"4"}).animate({"left":"0px"});

    }

    if(i < slidesubnumber - 1){i = i + 1;}else{i = 0;}

    setTimeout('slide()',5000);

    }

    slide();

    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

    推荐阅读更多精彩内容

    • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
      lilyping阅读 1,923评论 0 1
    • 通过这篇文章的阅读,希望大家积累一组观点:青少年的特点。 Some people who have been in...
      范俊如阅读 605评论 0 0
    • 01荒原上的一切都是迪伦的心像。迪伦心情好,就晴空万里;心情不好,就阴云密布。在生活中也是如此,如果我们以更多的善...
      顾尘埃阅读 186评论 9 10
    • 当我们创建类的多个对象时,可以通过创建对象数组的方式。如下代码: 说明: 1.当程序创建未被显式初始化的对象时,会...
      ZYiDa阅读 247评论 0 0