【JavaScript】輪播圖插件

1. 下載地址

https://github.com/thebird/Swipe

2. 開始佈局

樣式

<style type="text/css"> .swipe { 
	  overflow: hidden;
	  visibility: hidden;
	  position: relative;
	}
	.swipe-wrap { 
	  overflow: hidden;
	  position: relative;
	}
	.swipe-wrap > div { 
	  float:left;
	  width:100%;
	  position: relative;
	}
</style>

html代碼

<!--輪播-->
		<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
			<div class='swipe-wrap'>			
				<div class="banner">
					<img src="http://b-ssl.duitang.com/uploads/blog/201312/04/20131204184148_hhXUT.jpeg" alt="">
				</div>
				<div class="banner">
					<img src="http://b-ssl.duitang.com/uploads/blog/201312/04/20131204184148_hhXUT.jpeg" alt="">
				</div>
				<div class="banner">
					<img src="http://b-ssl.duitang.com/uploads/blog/201312/04/20131204184148_hhXUT.jpeg" alt="">
				</div>			
			</div>
		</div>

js代碼

<script src='./js/public/swipe.js'></script>
<script>

// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, { 
  // startSlide: 4,
  auto: 3000,
  continuous: true,
  disableScroll: true,
  // stopPropagation: true,
  // callback: function(index, element) {},
  // transitionEnd: function(index, element) {}
});

// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

</script>

配置參數