自动跳转--实现单行横移或翻转（上下、左右跳转）

一  通过jquery的animate实现上下单行自动跳转

<script type="text/javascript" src="__ROOT__/Style/H/js/jquery-1.7.2.min.js"></script>

<style>
    .rool-div{
        height:50px;
        width:700px;
        margin:0 auto;
        position: relative;
        overflow: hidden;
        border:2px solid red;
    }
    .roll{
        height:50px;
        width:700px;
        margin:0 auto;
    }
    .roll span{
        display:block;
        height:50px;
        width:700px;
        line-height:50px;
    }
    a {
        text-decoration:none;
　　　　　display:inline-block;
  }
</style>
<div class="rool-div">
 <div class="roll" id="roll">
     <span><a href="#">1. Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></span>
     <span><a href="#">2. It is a long established fact that a reader will be distracted</a></span>
     <span><a href="#">3. Many desktop publishing packages</a></span>
     <span><a href="#">4. All the Lorem Ipsum generators on the Internet tend to repeat predefined</a></span>
     <span><a href="#">5. The standard chunk of Lorem Ipsum used</a></span>
     <span><a href="#">6. English versions from the 1914 translation by H. Rackham.</a></span>
     <span><a href="#">7. Bu metin deneme amaçlıdır  the standard chunk of Lorem Ipsum used</a></span>
 </div>
</div>
<script>
    (function($){
        $.fn.extend({
            Roll:function(){
                return this.each(function(){
                    var n=0;
                    $('#roll span a').hover(function(){
                        $(this).css('color','red');
                    },function(){
                        $(this).css('color','green');
                    });
                    var timername=setInterval(function(){Play()},1000);
                    $("#roll").hover(
                            function()
                            {
                                clearInterval(timername);
                            },
                            function()
                            {
                            timername=setInterval(function(){Play()},1000);
                            });
                    function Play(){
                        if($("#roll>span").length>n)
                            n++;
                        else
                            n=1;
                        $("#roll").animate({'marginTop':-($("#roll span" ).height())*(n-1)});
                    }
                });
            }
        })
    })(jQuery);
</script>

二  通过scrollLeft函数实现自动左右移动（谷歌浏览器偶尔不能移动）

<style type="text/css">
#demo {overflow:hidden;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>
            <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>
<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>