滾動筆記1

<script>
	//alert($("ul li:first").hide());
	var li_h=71;
		 var time = 1000;
		 var movetime=1000;
	$(document).ready(function(){
		
		var linejobLen = $(".ula li").length;
		var docthismy = this;
		
		 
		//滑動動畫
		function autoanimy(){
		
			$("li:first",docthismy).animate({"margin-left":-li_h},movetime,function(){
				$(this).css("margin-left",0).appendTo(".ula");
			})
		}
		
		//自動間隔時間滑動
		var anifunmy = setInterval(autoanimy,time);
		
		$('.srol>ul').hover(function(){
			clearInterval(anifunmy);			//清除自動滑動動畫
		},function(){
			anifunmy = setInterval(autoanimy,time);	//繼續執行動畫
		})		
		//懸停時停止滑動，離開時繼續執行
		$(docthismy).children("li").hover(function(){
			clearInterval(anifunmy);			//清除自動滑動動畫
		},function(){
			anifunmy = setInterval(autoanimy,time);	//繼續執行動畫
		})
		$('#leftf').click(function(){
			clearInterval(anifunmy);	
			autoanimy();
		});
		$('#right').click(function(){
			clearInterval(anifunmy);	
			 $("ul li:eq(0)",docthismy).animate({"margin-left":li_h},movetime,function(){
				 $(".ula").prepend($("li:last"));
				$(this).css("margin-left",0);
			}) 
			
		});
		
	});
	
	
</script>
<style>
.ova{ height: 200px; width: 800px; margin: 0 auto;}
	.ov{ width: 216px; height: 100px;  margin: 0 auto; background: #FFB6C1 ; overflow: hidden; }
	.ula{ margin: 0 auto; }
	.ula li{ position:relative; float: left;; width: 70px; text-align:center; line-height: 60px; height: 100px ; background: #FF0000; border: 1px #000 solid; cursor: pointer;}
	.srol{ width: 360px; height: 100px; overflow: hidden; position: relative; left:-70px}
	.left{ float: left;}
	.lfetdiv,.right{ width: 100px; text-align: center; margin-top: 30px; cursor: pointer;}
</style>

<div class="ova">
	<div class="left lfetdiv"><a  id="leftf">left</a></div>
	<div class="ov left">
		<div class="srol">
			<ul class="ula">
					<li><img src="http://localhost/omeeting/upload/u1/1/55407289b5d44.png" height="60" width="60"></img><br>1</li>
					<li><img src="http://localhost/omeeting/upload/u1/1/5540729c472cd.jpg" height="60" width="60"><br>2</li>
					<li><img src="http://localhost/omeeting/upload/u1/1/554072b549cfd.jpg" height="60" width="60"><br>3</li>
					
					<li><img src="http://localhost/omeeting/upload/u1/1/554072be02561.jpg" height="60" width="60"><br>4</li>
					<li><img src="http://localhost/omeeting/upload/u1/1/554072d7d05fd.jpg" height="60" width="60"><br>5</li>
					<li><img src="http://localhost/omeeting/upload/u1/1/554072e348e2b.jpg" height="60" width="60"><br>6</li>
					
					<li><img src="http://localhost/omeeting/upload/u1/1/554072eb4b3f1.jpg" height="60" width="60"><br>7</li>
					<li><img src="http://localhost/omeeting/upload/u1/1/554073a17f838.jpg" height="60" width="60"><br>8</li>
					<li><img src="http://localhost/omeeting/upload/u1/1/554073ab236bc.jpg" height="60" width="60"><br>9</li>
			</ul>
		</div>
	</div>
	<div class="right left"><a id="right">right</a></div>
</div>

左右滾動，需導入jQuery