上下滚动的图片展示

<div id="demo">
	<div id="content">
	<table>
	<tbody>
		<tr>
		<td><a href=""><img class="imgCls" src="img/1.jpg" /></a></td>
		<td><a href=""><img class="imgCls" src="img/2.jpg" /></a></td>
		<td><a href=""><img class="imgCls" src="img/3.jpg" /></a></td>
		<td><a href=""><img class="imgCls" src="img/4.jpg" /></a></td>
		</tr>
	</tbody>
	</table>
	</div>
</div>

.imgCls{
	width:150px;
	height:150px;
	padding:0px;
	margin-top:3px;
}
a img {
	border:none;
}

#demo{
	overflow:hidden;
	width:350px;
	height:190px;
	margin:0 auto;
	background-color:#999;
	
}
#demo table{
	background-color:#666;
	border-spacing:0px;
}
#demo table td{
	padding:5px;
}
#content{
	margin-top:10px;
}

//效果一：左右反复滚动
function autoScroll(){
    var demo = document.getElementById('demo');
    var content = document.getElementById('content');
    var speed = 40;
    var cursor = 1;
    function Marquee1() {
            var oldVal =  demo.scrollLeft;
            demo.scrollLeft += cursor;
            if(oldVal == demo.scrollLeft){
		//到达两边，暂停1秒钟
                clearInterval(MyMar1);
                setTimeout(function(){
                    MyMar1 = setInterval(Marquee1, speed)
                },1000);
		
		//反向滚动
                cursor = -cursor
            }

    }
    var MyMar1 = setInterval(Marquee1, speed)
    demo.onmouseover = function() {
        clearInterval(MyMar1)
    }
    demo.onmouseout = function() {
        MyMar1 = setInterval(Marquee1, speed)
    }
}

//效果二：同一方向循环滚动
function go(){

    var demo = document.getElementById('demo');
    var speed = 40;
    //保留原有宽度
    var contentWidth = $('#demo table').width();

    var tds = $('#demo table tr').html();
    //复制内容
    $('#demo table tr').html(tds + tds);

     var dir = 'r';
    function Marquee1() {
        if(dir == 'l'){
            if(demo.scrollLeft <= contentWidth){
                demo.scrollLeft ++;
            }
            else{
                demo.scrollLeft = 0;
            }
        }
        else if(dir == 'r'){
            if(demo.scrollLeft > 0){
                demo.scrollLeft --;
            }
            else{
                demo.scrollLeft += contentWidth; 
            
            }
        }

    }
    var MyMar1 = setInterval(Marquee1, speed)
    demo.onmouseover = function() {
        clearInterval(MyMar1)
    }
    demo.onmouseout = function() {
        MyMar1 = setInterval(Marquee1, speed)
    }
}