javascript自动左右滑动图片以及自动上下滑动图片

css样式+javascript实现左右滑动图片

css样式：

javascript_code:

html_code

    这就呈现出自动由右向左滑动，当鼠标onmouseover时，触发function () { clearInterval(timer); }事件；鼠标onmouseout时， setInterval(function () {.......｝事件

   css样式+javascript实现上下滑动图片

CSS样式:

* {
	margin:0;
	padding:0;
}
img, a {
	border:0;
}
.span230 {
	width:300px;
    
}
.span230a{
	width:400px;
    padding-left:250px;
}
ul, li {
	list-style:none;
}
#scrollboxa {
	height:400px;
     width:300px;
	overflow:hidden;
}

.btntop, .btnbottom {
	height:12px;
	overflow:hidden;
	background:url(../images/arrowtopbottom.gif) no-repeat;
	cursor:pointer;
}
.btntop {
	background-position:60px 0;
}
.btnbottom {
	background-position:60px -12px;
}
#scrollbox {
height:400px;
     width:300px;
	overflow:hidden;
}
.scrollcon {
	height:800%;
}
.scrollpic li {
	height:55px;
	overflow:hidden;
	margin:5px 0;
}
.scrollpic li img {
	float:left;
	display:inline;
	margin:0 10px 0 0;
}
.scrollpic li a {
	display:block;
	height:20px;
	 
	font-size:12px;
	color:#fff;
	line-height:20px;
	text-decoration:none;
}
.scrollpic li a:hover {
	background:#3d4558;
	color:#ff6600;
}

javascript_code:

html_code:

             

  
 
  

    

      

        

          
 
                中国北京
          
 
                中国上海
          
 
                中国重庆
          
 
                中国深圳