【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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

配置参数

文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fangkang7/article/details/103401852