jQuery多张图无缝滚动实例代码

浏览数：46 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>多张图无缝滚动</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
    //如果要使一个元素运动起来，一般情况下这个元素需要具有position属性值可以是absolute/relative
    var oul = $(‘.wrap ul‘);
    //获取字符然后相加就是新的oul
    var oulhtml = oul.html();
    oul.html(oulhtml+oulhtml);
    var speed = 2;
    var timeId = null;
    var ali = $(‘.wrap ul li‘);
    var aliWidth = ali.eq(0).width();
    var aliSize = ali.size();
    var ulWidth = aliWidth*aliSize;
    oul.width(ulWidth);
    function slider(){
        if(speed<0){
            //无缝向左滚动
            if(oul.css(‘left‘)==-ulWidth/2+‘px‘){
                oul.css(‘left‘,0);
            }else{
                oul.css(‘left‘,‘+=-2px‘);
            }
        }else{
            //无缝向右滚动
            if(oul.css(‘left‘)==‘0px‘){
                oul.css(‘left‘,-ulWidth/2+‘px‘)
            }else{
                oul.css(‘left‘,‘+=‘+speed+‘px‘);
            }
        }    
    };
    //setInterval函数的作用是每隔一段时间执行该函数里的代码
    timeId = setInterval(slider,30);
    $(‘.wrap‘).mouseover(function() {
        //clearInterval函数的作用是用来清除定时器
        clearInterval(timeId);
    }).mouseout(function(){
        timeId = setInterval(slider,30);
    });
    $(‘.goLeft‘).click(function() {
        speed = -2;
    });
    $(‘.goRight‘).click(function() {
        speed = 2;
    });
});
</script>
<style>
*{padding: 0;margin: 0}
li{list-style: none;}
body{margin: 50px;}
.wrap{border: 3px solid #f00; width: 800px;height: 200px; margin: 0 auto;position: relative; overflow: hidden;}
.wrap ul{overflow: hidden; _height:1px;width: 1600px;position: absolute;left: 0;top:0;}
.wrap ul li{float: left;}
</style>
</head>
<body>
    <a href="javascript:;" class="goLeft">向左走</a>
    <a href="javascript:;" class="goRight">向右走</a>
<div class="wrap">
    <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>
        <li><img src="5.jpg" alt="" /></li>
    </ul>
</div>
</body>
</html>