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