首页 > 特效插件 > 滚动轮播 >  Swipe.js手指触摸滑动图片轮播js插件正文

Swipe.js手指触摸滑动图片轮播js插件

特效介绍

Swipe.js
swipe.js 手机版触屏图片滑动

        Swipe.js，支持手指滑动的手机版图片滚动插件。自适应屏幕宽度，自动改变图片大小。我爱模板网推荐。使用方法简单，扩展性强。以后妈妈再也不担心我的手机版图片滚动啦！

使用方法

1、引入swipe.js和main.css，您也可以将main.css进行修改后放到自己的css文件。

2、将您的html代码写成下面的结构： 

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div>图片地址</div>
    <div>图片地址</div>
    <div>图片地址</div>
    <div>图片地址</div>
  </div>
</div>
<ul id="position">
   <li class="on"></li>
   <li class=""></li>
   <li class=""></li>
   <li class=""></li>
</ul>
注意，main.css中，下面的代码就是您需要的插件修饰代码： 
.swipe {
	overflow: hidden;
	visibility: hidden;
	position: relative;
}
.swipe-wrap {
	overflow: hidden;
	position: relative;
}
.swipe-wrap > figure {
	float: left;
	width: 100%;
	position: relative;
}
3、js代码调用： 
<script>
var slider =
  Swipe(document.getElementById('slider'), {
    auto: 3000,
    continuous: true,
    callback: function(pos) {

      var i = bullets.length;
      while (i--) {
        bullets[i].className = ' ';
      }
      bullets[pos].className = 'on';

    }
  });
var bullets = document.getElementById('position').getElementsByTagName('li');
</script>
具体参数说明： 
startSlide: 4,  //起始图片切换的索引位置
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true,  //无限循环的图片切换效果
disableScroll: true,  //阻止由于触摸而滚动屏幕
stopPropagation: false,  //停止滑动事件
callback: function(index, element) {},  //回调函数，切换时触发
transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数。
如果需要上一页下一页的翻页按钮的话，在上面的html最后加入下面的代码： 
<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>
这样，您的swipe图片滚动就完成了。

TAGS: Swipe.js  手指  触摸  滑动  图片  轮播  插件  swipe.js