现在的位置: 首页 > 互联网络 > WP相关 > 正文

用jQuery实现图片轮播特效

2010-09-01 16:59 WP相关 ⁄ 共 965字 ⁄ 字号 评论 1 条

HTML结构代码

<div id="scrollbox">
    <ul>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
    </ul>
</div>
CSS控制代码

#scrollbox{width:500px;height:240px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #000;}
#scrollbox ul {width:900px;height:280px;position:absolute;padding:10px 0;}
#scrollbox li {float:left;position:relative;margin:0 10px;border:1px solid #000;}

jQuery核心代码

function scrollBox(){
    var first = $('#scrollbox ul li:first');
    var width = -(first.outerWidth(true)) + 'px';
    $('#scrollbox ul').animate({left:width},{
        duration:200,
        complete:function(){
            $('#scrollbox ul').append(first).css("left","0");
        }
    });
};
$(document).ready(function(){
    myScroll = setInterval(scrollBox,1500);
    $('#scrollbox').hover(function(){
        clearInterval(myScroll);
    },function(){
        myScroll = setInterval(scrollBox,1500);
    }
);
})

    最后别忘记加载jQuery。
    参考文献

目前有 1 条留言    访客:1 条, 博主:0 条

  1. david 2010年10月05日 6:57 上午  @回复  Δ1楼 回复

    这个好像蛮不错的哦,我等下也去试试看哈。

给我留言

留言无头像?