imagechange.html

<!doctype html>
<html>
<head>
	<title>Mobile Cookbook</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/mui-base.css" />
	<link rel="stylesheet" type="text/css" href="css/mui-imageswitch.css" />
	<style type="text/css">
/*		#slider{
			width: 300px;
		}
		#slider1{
			width: 80%;
			margin-top: 40px;
		}
		#slider1 > .wrap > div{
			height: 40%;
		}
*/	</style>
</head>
<body>
	<h4>图片切换</h4>
	<div id='image_slider' class='imagechange'>
	  	<ul class="wrap">
			<li>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_3a.jpg">
			</li>
			<li>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_436d106e37b424ba42169473.jpg">
			</li>
			<li>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_6a.jpg">
			</li>
			<li>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_10a.jpg">
			</li>
			<li>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_1a.jpg">
			</li>
		 </ul>
		 <ul class="btnsWrap">
		 </ul>
	</div>

<!-- 	<div id='slider1' class='imagechange'>
	  	<div class="wrap">
			<div>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_3a.jpg">
			</div>
			<div>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_436d106e37b424ba42169473.jpg">
			</div>
			<div>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_6a.jpg">
			</div>
			<div>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_10a.jpg">
			</div>
			<div>
				<img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_1a.jpg">
			</div>
		 </div>
		 <ul class="btnsWrap">
		 </ul>
	</div>
 -->

	<script type="text/javascript" src="js/JM.js"></script>
	<script type="text/javascript" src="js/slide.js"></script>
	<script type="text/javascript" src="js/swipechange.js"></script>
	<script type="text/javascript" src="js/imagechange.js"></script>
	<script type="text/javascript">


	var sc = MUI.ImageChange({
		id:"image_slider",
		isAutoChange:true,
		autoChangeTime:3000,
		canSwipe:true
	});

	// var sc1 = MUI.ImageChange({
	// 	id:"slider1",
	// 	isAutoChange:true,
	// 	autoChangeTime:3000,
	// 	canSwipe:true
	// });
	</script>
</body>

</html>