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

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

css样式：

     <style>
        #div1  
     {position:relative;width:800px;height:200px;overflow:hidden; 
         }
  #div2{position:absolute;}
  li{ float:left;list-style-type:none;padding:3px;}
  img{border:none;}
  #div2 li a:hover{top:-10px;}
  a{position:relative;}
  </style>  

javascript_code:

 <script>
      window.onload = function () {
          var odiv2 = document.getElementById('div2');
          var ali = odiv2.getElementsByTagName('li');
          var aspeed = -5;
          var timer = null;
          odiv2.innerHTML += odiv2.innerHTML;
          odiv2.style.width = ali[0].offsetWidth * ali.length + 'px';
          odiv2.onmouseover = function () { clearInterval(timer); };
          function a() {
              timer = setInterval(function () {
                  odiv2.style.left = odiv2.offsetLeft + aspeed + 'px';
                  if (odiv2.offsetLeft < -odiv2.offsetWidth / 2) {
                      odiv2.style.left = '0px';
                  }
              }, 100);
          };
          odiv2.onmouseout = a;
          a();
      }
 </script>

html_code

                  <div id='div1'>
                          <div id='div2'>
                              <ul>
                           <li><a href="#"><img src="images/big_jp1.jpg" style="height:200px"/></a></li>
                           <li><a href="#"><img src="images/big_jp2.jpg" style="height:200px" /></a></li>
                           <li><a href="#"><img src="images/big_jp3.jpg" style="height:200px" /></a></li> 
                           <li><a href="#"><img src="images/big_jp4.jpg " style="height:200px"/></a></li> 
                             </ul>
                        </div>
                    </div>

    这就呈现出自动由右向左滑动，当鼠标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:

<script type="text/javascript">
<!-- javascript 图片上下滚动
    var speeda = 30;
    var directiona="top";
    var taba = document.getElementById("scrollbox");
    var tab1a = document.getElementById("boximg");
    var tab2a = document.getElementById("fuzhi");
    var leftDira = document.getElementById("leftDir");
    var rightDira = document.getElementById("rightDir");
    tab2a.innerHTML = tab1a.innerHTML;
    function marquee(){
        switch(directiona){
            case "top":
                if(tab2a.offsetHeight - taba.scrollTop <= 0){
                    taba.scrollTop -= tab1a.offsetHeight;
                }
                else{
                    taba.scrollTop++;
                }
                break;
            case "bottom":
                if(taba.scrollTop <= 0){
                    taba.scrollTop += tab2a.offsetHeight;
                }
                else{
                    taba.scrollTop--;
                }
                break;
        }
    }
    function changeDirection(dir){
        directiona = dir;
    }
    var timera = setInterval(marquee,speeda);
    taba.onmouseover = function(){clearInterval(timera);};
    taba.onmouseout = function(){timera = setInterval(marquee,speeda);};
    leftDira.onclick = function(){changeDirection("top");};
    rightDira.onclick = function(){changeDirection("bottom");};
    -->
</script>

html_code:

             <div class="span230" style="background-color:red">
  <div id="leftDir" class="btntop"> </div>
  <div id="scrollbox">
    <div class="scrollcon">
      <div id="boximg" class="scrollpic">
        <ul>
          <li> 
              <a href="#">  <font color="black" family="楷体" size="3px">中国北京</font></a></li>
          <li> 
              <a href="#"> <font color="black" family="楷体" size="3px"> 中国上海</font></a></li>
          <li> 
              <a href="#"> <font color="black" family="楷体" size="3px"> 中国重庆</font></a></li>
          <li> 
              <a href="#"> <font color="black" family="楷体" size="3px"> 中国深圳</font></a></li>
        </ul>
      </div>
      <div id="fuzhi" class="scrollpic"> </div>
    </div>
  </div>
  <div id="rightDir" class="btnbottom"> </div>
</div>