<style type="text/css">

#demo {overflow:scroll;width:740px; }   
#indemo { float: left; width: 800%;}

#demo1 { float: left; }

#demo2 { float: left;margin-left:7px;}

</style>

<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>

<div id="demo">

    <div id="indemo">

        <div id="demo1">

            <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>

            <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>

            <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>

        </div>

        <div id="demo2"></div>  </div>

</div>
一 采用jquery方式实现文字横移

<script>

    var speed=20;

    $("#demo2").html($("#demo1").children().clone());

    var n=0;

    function Marquee(){

        if(n>=$("#demo").innerWidth())

            n=0;

        else{

            n++;

        }

        $("#demo").scrollLeft( n );

    }

var MyMar=setInterval(Marquee,speed);

    $("#demo").mouseover(function(){clearInterval(MyMar)});

    $("#demo").mouseout(function(){MyMar=setInterval(Marquee,speed)});

</script>
二 采用原生script实现横移
<script>

var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
$("#demo2").text($("#demo1").clone());
$("#demo2").clone();
function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
    tab.scrollLeft-=tab1.offsetWidth
    else{
    tab.scrollLeft++;
    }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>