您的位置：首页 > 其它

自己动手丰衣足食之Swiper插件

2016-02-20 22:02 399 查看


下载地址http://download.csdn.net/detail/cometwo/9437881

Swiper插件中文网http://www.swiper.com.cn/

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta http-equiv="refresh" content="100">
<title>Swiper中文网</title>
<link href="dist/css/base.css" rel="stylesheet" type="text/css" />
<link href="dist/css/layout.css" rel="stylesheet" type="text/css" />
<link href="dist/css/swiper.min.css" rel="stylesheet" type="text/css" />
<script src="dist/js/swiper.min.js"></script>

</head>

<body class="index">

<div id="banner">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-container" id="bannerSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" id="swiper-slide1">
<div class="inner">
<div id="mainTheme">
<h1>Swiper</h1><span>3</span></div>
<p data-swiper-parallax="-1500">开源、免费、强大的移动端触摸滑动插件</p>
<div class="subbtn" data-swiper-parallax="-3000">
<a class="button" href="/demo/index.html">查看Swiper演示</a> <a class="button" href="/api/index.html">查看API 文档</a> <a class="button" href="http://bbs.swiper.com.cn" target="_blank">交流、分享Swiper</a> <a class="button" href="http://swiper2.swiper.com.cn"
target="_blank">回顾Swiper2</a></div>
<div class="mainbtn" data-swiper-parallax="-4500">
<a href="/usage/index.html">开始使用 Swiper</a></div>
</div>
</div>
<div class="swiper-slide" id="swiper-slide2">
<div class="inner">
<dl>
<dt data-swiper-parallax="-500">为什么选择Swiper？</dt>
<dd style="margin-top:50px;" data-swiper-parallax="-1500"> 免费，开源，稳定，应用广泛 </dd>
<dd data-swiper-parallax="-3000"> 1可单独使用无需jQuery，亦可结合jQuery </dd>
<dd data-swiper-parallax="-4500"> 简单配置即可实现手机、平板网站大部分触摸功能 </dd>
<dd data-swiper-parallax="-6000"> 包括焦点图，tab，触摸滑动导航等 </dd>
<dd data-swiper-parallax="-7500"> 文档丰富，大量活跃用户解答疑问 </dd>
</dl>
</div>
</div>
</div>
</div>
<div id="bannerpagination" class="pagination"></div>
</div>
<script language="javascript">
function display(li) {
li.className = 'active';
var subdis = li.getElementsByTagName("ul")[0];
subdis.style.display = "block";
}

function ndisplay(li) {
li.className = 'noactive';
var subdis = li.getElementsByTagName("ul")[0];
subdis.style.display = "None";
}
var preBtn = document.querySelectorAll('.pre-btn');
for (var j = 0; j < preBtn.length; j++) {
preBtn[j].onclick = function() {
this.style.display = 'none';
this.parentNode.querySelector('.pre-load').style.display = 'none';
myframe = this.parentNode.querySelector('iframe');
framesrc = myframe.attributes["data-src"].value;
myframe.setAttribute("src", framesrc);
}
}
</script>

<div style="display:none;">
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6387fcb06c7f33ad6787ab913d4e6d10' type='text/javascript'%3E%3C/script%3E"));
</script>
<div>

<script>
var mySwiper = new Swiper('#bannerSwiper', {
loop: true,
autoplay: 5000,
speed: 1000,
pagination: '#bannerpagination',
paginationClickable: true,
grabCursor: true,
nextButton: '.arrow-right',
prevButton: '.arrow-left',
parallax: true,
});
</script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航