【JavaScript】轮播图插件

最新推荐文章于 2024-08-15 18:01:46 发布

咔咔-

最新推荐文章于 2024-08-15 18:01:46 发布

阅读量707

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/fangkang7/article/details/103401852

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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>