您的位置：首页 > Web前端 > HTML

出色的html滑动效果库 swiper -例子1 横向滑动，结束自动切换回第一栏

2013-12-01 10:54 344 查看

可以用于div滑动，图片滑动等切换

例子代码以及所需资源：http://download.csdn.net/detail/feisy/6638105

官网例子：使用iframe来在同一个页面里面加入了很多各种不同的演示 http://www.idangero.us/sliders/swiper/demos.php

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<style>
/* Demo Syles */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
}

.device {
width: 640px;
height: 300px;
padding: 30px 40px;
border-radius: 20px;
background: #111;
border: 3px solid white;
margin: 5px auto;
position: relative;
box-shadow: 0px 0px 5px #000;
}

.device .arrow-left {
background: url(img/arrows.png) no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
}

.device .arrow-right {
background: url(img/arrows.png) no-repeat left bottom;
position: absolute;
right: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
}

.swiper-container {
height: 300px;
width: 640px;
}

.content-slide {
padding: 20px;
color: #fff;
}

.title {
font-size: 25px;
margin-bottom: 10px;
}

.pagination {
position: absolute;
left: 0;
text-align: center;
bottom: 5px;
width: 100%;
}

.swiper-pagination-switch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #999;
box-shadow: 0px 1px 2px #555 inset;
margin: 0 3px;
cursor: pointer;
}

.swiper-active-switch {
background: #fff;
}
</style>
</head>
<body>
<div class="device">
<a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/slider1-1.png">
</div>
<div class="swiper-slide">
<img src="img/slider1-2.png">
</div>
<div class="swiper-slide">
<div class="content-slide">
<p class="title">Slide with HTML</p>
<p>You can put any HTML inside of slide with any layout, not
only images, even another Swiper!</p>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
pagination : '.pagination',
loop : true,
grabCursor : true,
paginationClickable : true
})
$('.arrow-left').on('click', function(e) {
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e) {
e.preventDefault()
mySwiper.swipeNext()
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航