簡單的輪播圖jquery

效果

css代碼

<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			div {
				margin: auto;
				width: 1200px;
				height: 300px;
				overflow: hidden;
			}
			
			ul {
				width: 6000px;
				height: 100%;
			}
			
			li {
				float: left;
				width: 1200px;
				height: 300px;
			}
		</style>

html代碼
<

body>
		<div>
			<ul id="ul">
				<li><img src="img/1.jpg" /></li>
				<li><img src="img/2.jpg" /></li>
				<li><img src="img/3.jpg" /></li>
				<li><img src="img/4.jpg" /></li>
				<li><img src="img/1.jpg" /></li>
			</ul>

		</div>
	</body>

jQuery代碼

<script>
	$(function() {
		var flag = 0;
		setInterval(function() {
			flag++;
			if(flag > 4) {
				flag = 1;
				$('#ul').css({"margin-left":"0"});
			}
			var num = -flag * 1200
			$('#ul').animate({"margin-left": num + "px"}, 600);
		}, 1200);
	})
</script>