现在位置首页 / 前端开发 /正文

Html5手机触摸左右滑动插件-idangerous.swiper

作者: IT小兵 | 2014年9月2日| 热度:℃ | 评论: |参与:

今天分享一个支持手机触摸的Html5手机触摸左右滑动插件-idangerous.swiper。

效果图:

样式和js引用:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>html5手机wap</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="images/basic.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="images/idangerous.swiper.css">
<script type="text/javascript" src="images/jquery.min.js"></script>
<script src="images/idangerous.swiper-2.1.min.js"></script>

只要按照以下html结构完成菜单的定义:

<div class="swiper-container4">
			<div class="swiper-wrapper">
				  <div class="swiper-slide red-slide">
					<div class="li">
						<img class="doc" src="images/doc.png" />
						<dl>
							<dt>清蒸虾仁</dt>
							<dd>原价28¥</dd>
							<dd class="red">现价19¥</dd>
						</dl>
					</div>
					<div class="li odd">
						<img class="doc" src="images/doc.png" />
						<dl>
							<dt>清蒸虾仁</dt>
							<dd>原价28¥</dd>
							<dd class="red">现价19¥</dd>
						</dl>
					</div>
				  </div>
				  <div class="swiper-slide red-slide">
					<div class="li">
						<img class="doc" src="images/doc.png" />
						<dl>
							<dt>清蒸虾仁</dt>
							<dd>原价28¥</dd>
							<dd class="red">现价19¥</dd>
						</dl>
					</div>
					<div class="li odd">
						<img class="doc" src="images/doc.png" />
						<dl>
							<dt>清蒸虾仁</dt>
							<dd>原价28¥</dd>
							<dd class="red">现价19¥</dd>
						</dl>
					</div>
				  </div>
		  </div>

将容器复制给插件即可完成调用:

<script>
		  $(function (){
			  var mySwiper4 = new Swiper('.swiper-container4',{
				//pagination: '.pagination4',
				loop:true,
				paginationClickable: true,
				moveStartThreshold: 100
			 });
			  var resize4 = function(e) {
				var query4 = $('.swiper-container4');
				var clientW4 = query4[0].clientWidth;
				query4.css('height', clientW4*262/730+141+'px');
			  }
			  $(window).bind('resize', resize4);
			  resize4();
			  setInterval(function(){
				mySwiper4.swipeNext();
			  }, 5000);
		  });
		</script>

demo百度网盘下载:

链接:http://pan.baidu.com/s/1eQGL5fk   密码:n1uk

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询