兼容移动客户端banner切换焦点图swiper插件
效果描述：
适应移动客户端，包括pad以及手机客户端
左右全屏效果，带有左右箭头，同时支持点状切换按钮
一个非常不错的jQuery插件——idangerous.swiper.js
可以左右滑动屏幕切换
缺点：
不支持自动切换
使用方法：
1、将index.html中的lanrenzhijia.css样式引入到你的页面中
2、将代码部分拷贝过去，然后修改至你想要的样式即可
index.html代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兼容移动客户端banner切换焦点图swiper插件</title>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- 代码部分begin -->
<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="http://demo.lanrenzhijia.com/2014/swiper1020/images/slider1-1.png"> </div>
<div class="swiper-slide"> <img src="http://demo.lanrenzhijia.com/2014/swiper1020/images/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="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/idangerous.swiper.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>
<!-- 代码部分end -->
</body>
</html>
下载地址：
lanrenzhijia.css样式代码：
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(http://demo.lanrenzhijia.com/2014/swiper1020/images/arrows.png) no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
}
.device .arrow-right {
background: url(http://demo.lanrenzhijia.com/2014/swiper1020/images/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;
}
.swiper-container {
margin:0 auto;
position:relative;
overflow:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
/* Fix of Webkit flickering */
z-index:1;
}
.swiper-wrapper {
position:relative;
width:100%;
-webkit-transition-property:-webkit-transform, left, top;
-webkit-transition-duration:0s;
-webkit-transform:translate3d(0px,0,0);
-webkit-transition-timing-function:ease;
-moz-transition-property:-moz-transform, left, top;
-moz-transition-duration:0s;
-moz-transform:translate3d(0px,0,0);
-moz-transition-timing-function:ease;
-o-transition-property:-o-transform, left, top;
-o-transition-duration:0s;
-o-transform:translate3d(0px,0,0);
-o-transition-timing-function:ease;
-o-transform:translate(0px,0px);
-ms-transition-property:-ms-transform, left, top;
-ms-transition-duration:0s;
-ms-transform:translate3d(0px,0,0);
-ms-transition-timing-function:ease;
transition-property:transform, left, top;
transition-duration:0s;
transform:translate3d(0px,0,0);
transition-timing-function:ease;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
float: left;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
}
页:
[1]