图片滚动

  封装js代码：（做的不够好，请大家多多指教）

<script type="text/javascript">
				
			/*

	 *@param   automove(mul,ileft,iright,ispeed)
		*@param   automove 无缝滚动图片
		*@param		 mul 图片ul id
		*@param		 ileft  左控制按键
	 *@param   irigth  右控制按键
		*@param	  ispeed   滚动速度；
		*@param     功能可以在按键上加以扩展；
			*/
				 (function  automove(mul,ileft,iright,ispeed){
				var ileft = document.getElementById('ileft');
				var iright = document.getElementById('iright');
			 var move = document.getElementById("mul");
				var  imove= move.getElementsByTagName("li");
				var ispeed;   //滚动速度
				var timer= null;	
						move.innerHTML += move.innerHTML ;
						// 复制一份ul ；
						move.style.width= imove[0].offsetWidth*imove.length+'px';
						//  用js 获取ul 的长度，这样封装更好
			   move.onmouseover= function()
						{
				             ispeed=0;
					  }
		    	move.onmouseout=ileft.onclick =  function ()
							{
			     //		clearInterval(timer)       可以用它来停止滚动；
				       ispeed=5;
			         }
						iright.onclick =  function (){
										
	                ispeed=-5;
		           }
							function  autom()
									{					
									move.style.left = move.offsetLeft - ispeed+'px';
								
												if(move.offsetLeft<-move.offsetWidth/2)
												// 当移动过了一半时，重新定位它的位置   这里是向左移动 
									{
									     move.style.left= '0px';
									}
									    else if(move.offsetLeft >0)
													// 当向右移动过了一半时，重新定位位置；
													
									{
										
										   move.style.left =-move.offsetWidth/2 ;
										};
										}
								
							 timer=	setInterval (autom, 30);
								
						  })( "mul","ileft","iright",5)
      </script>

 div 布局：

                <style type="TEXT/CSS">
      #all,#move,div,ul,li,img{ padding:0; margin:0;}
                 #all{ position:relative;top:100px; left:300px}
                      #move { overflow:hidden;width:622px; height:106px; position:relative;top:0; left:0;  }
                            #move ul{ position:absolute; left:0; top:0; height:105px; }
                    
                    #move ul li{ width:155px; height:105px; float:left;list-style:none;}
                    #move ul li img{ width:150px; height:100px; float:left;padding:2px; }
                    #ileft{position:absolute; top:15px; left:-80px; background:url(ex/images/LEFT.jpg); width:78px;height:78px; }
                    #iright{position:absolute; top:15px; left:625px; background:url(ex/images/RIGHT.jpg); width:78px;height:78px;}
                </style>

</head>
<body >
<div id="all">

<div id="move">
<ul        id="mul">
<li><img src="ex/images/1.png"></li>
<li><img src="ex/images/2.png"></li>
<li><img src="ex/images/3.png"></li>
<li><img src="ex/images/4.png"></li>
<li><img src="ex/images/5.png"></li>
<li><img src="ex/images/8.jpg"></li>
</ul>
</div>
<input type="BUTTON" id="ileft">
<input type="button" id="iright">
</div>
<body>
posted @ 2012-11-10 13:25  hezai  阅读(199)  评论(0)    收藏  举报