兼容移动客户端banner切换焦点图swiper插件

灰儿 · 2017-9-24 13:24:19

效果描述：
适应移动客户端，包括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>

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

</body>
</html>

下载地址：

兼容移动客户端banner切换焦点图swiper插件.rar (2.25 KB, 下载次数: 301)

灰儿 · 2017-9-24 13:24:55

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(

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

) 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;
}

		自动登录	找回密码
密码			注册

兼容移动客户端banner切换焦点图swiper插件

回复

关注我们