zScroll v2.8 说明

这个东西，最初是自己写的一个库。因为拆专题比较罗嗦，时间又赶，碰上滚来滚去的效果，就希望有一个方便好用的JS库来实现这些效果。以前是用教授写的东东，后来发现碰上一个页面上有多个滚动的情况，教授写那个用起来比较麻烦，况且，运气好的话还能碰上无敌疯狂的“滚动套滚动”，即便有想死的心，也得先做完不是！！所以，就自己写了一个库。初始目的就是封装一下代码，使一个页面上的多个滚动效果之间互不影响。

随着不断的使用，发现了不少问题。尤其是这次北方网CMS上线后，自动播放功能会无限触发页面热力图统计，加上以前必须将JS代码写在 onload 里，才能正确加载图片的问题，所以这次花时间重构了代码，修正了上述各种问题，并考虑了长期以来大家的使用习惯，加入了一点新东西。最后，感谢大家使用，有BUG随时反馈！！

版本更新

本次版本更新至 v2.8，改动较大，解决了以前存在的一些BUG；功能上作了优化和增加；

1、封装了滑动切换(slide)效果和渐变切换(fade)效果( 示例 )，支持手势及鼠标拖拽切换；响应式适配；
2、支持参数自定义，本版本参数有所增加；
3、支持循环轮播，autoplay参数默认为false；
4、支持四个方向(left,right,top,bottom)滑动切换；
5、支持分组显示及滑动（2个及以上为一组同时滑动，也可以在分组显示时，强制每次只滑动一个的距离）；
6、PC端支持鼠标拖拽；
7、兼容性：依然向下兼容至IE7；
8、与其它插件相比，功能较简单，仅实现了常用功能和效果；
9、增加断点参数breakpoints( 示例 )，可在不同屏幕尺寸下重置previewNum、space的值；（不必再手工去计算了）
10、风格预设：预设了default、gray、blue、red四种风格(针对翻页及分页按钮)；
11、优化分页样式，并增加fraction(分数)分页样式( 示例 )，目前共有point、number( 示例 )、fraction( 示例 )三种分页样式；并可用 paginationPosition 参数设置分页按钮出现在内部还是下方;
12、优化标题栏的显示，可用 titlePosition 参数设置标题栏浮动于内部，还是放置于下方( 示例 );
13、图片加载优化，使用 updateOnImagesReady (默认true) 参数，可在图片加载后，根据图片大小重置容器尺寸，不必再写onload啦！
14、优化翻页按钮，前进、后退按钮上不再强制写样式（方便自定义样式）; slideDirect值为"V"时例外，此时分页按钮pagination将垂直排列，考虑到兼容IE的CSS写法，此时依然在控件内将分页按钮写死，以确保垂直居中；如果有特殊需求，请手工重写样式；
15、优化手势支持，解决在移动端手势滑动时，左右方向的滑动控件影响页面整体上下滑动的问题；
16、事件支持，使用事件可定制选项卡模式( 示例 )，还可以自己定制前进、后退按钮( 示例 )；

注意事项

1、参数优先级别：自定义参数 > 默认参数；
2、updateOnImagesReady 参数为true时，将会根据图片大小强制重置 wrapper 尺寸（注意，不会重置最外层容器container的尺寸）；所以，请注意窗口和图片尺寸的配合；该参数值为 false，不会重置尺寸；所以，当容器container的尺寸大于图片实际尺寸时，将会出现空白区域；
3、在北方网CMS中，如果发现控件什么都没有显示，也没有报错，那很有可能是因为slide中图片没有读到，而不是控件有问题；
4、查看console输出，如果出现“Container DOM 结构有误.”的提示，要么是控件的DOM本身写错了，要么是ID冲突了，请注意检查；
5、如果previewNum大于1，比如为3，而slide总数不是previewNum的倍数时，假设slide.length为4，此时，slide.length%previewNum>0，分组（3个一起）滑动是不合逻辑的。因此，这种情况下，single会强制设为1，一张一张滚动，以解决滚动出错的问题；

仅需定义容器尺寸即可：
	.container {width:400px;height:250px;}
也可以让容器按图片尺寸适配，此时无需写任何尺寸；
如果slideDirect为V，即垂直变换模式，且slide内无图片，则要写height值，
否则无法计算了；
		

<div class="container" id='scroll'>
  <ul>
    <li>内容 1</li>
    <li>内容 2</li>
    <li>内容 3</li>
    <li>内容 4</li>
  </ul>
</div>
		

var scroll = new zScroll({
  container : '#scroll'
});
		

<div class="container" id='scroll'>
  <div class=".swiper-container">
    <div class=".swiper-slide">内容 1</div>
    <div class=".swiper-slide">内容 2</div>
    <div class=".swiper-slide">内容 3</div>
    <div class=".swiper-slide">内容 4</div>
  </div>
</div>
    

var scroll = new zScroll({
  container : '#scroll',
  slider : '.swiper-container',
  sliderItem : '.swiper-slide'
});
    

1、横向滑动(标准模式)

var scroll1 = new zScroll({
  container : '#scroll1'
});
	

2、竖向滑动(标准模式)

var scroll2 = new zScroll({
  container : '#scroll2',
  slideDirect : 'V'
});
	

3、横向多个滑动(带single参数)

var scroll3 = new zScroll({
	container : '#scroll3',
  style: 'red',
  previewNum: 2,
  space: 5,
  single : true
});
	

4、竖向多个滑动(不定义尺寸)

var scroll4 = new zScroll({
	container : '#scroll4',
  slideDirect : 'V',
  previewNum: 2,
  space: 5,
});
	

5、竖向多个滑动(自定义尺寸+2层嵌套)

var scroll5 = new zScroll({
  container : '#scroll5',
  slideDirect : 'V',
  previewNum : 3,
  height : 400,
  space : 5
});
var scroll6 = new zScroll({
  container : '#scroll6',
  loop : true,
  autoplay: true,
  button: false,
  previewNum : 2,
  height: '100%',
  space : 5
});
	

6、fade效果(previewNum无效)

var scroll7 = new zScroll({
	container : '#scroll7',
  style: 'gray',
  slideEffect : 'fade',
  previewNum: 2
});
	

7、breakpoints参数示例(适配多设备)

var scroll8 = new zScroll({
  container : '#scroll8',
  slideEffect : 'slide',
  breakpoints: { 
    //当宽度小于等于320
    320: {
      previewNum: 1,
      space: 5
    },
    //当宽度小于等于414
    414: { 
      previewNum: 2,
      space: 10
    }
  }
});
	

8、选项卡效果(事件应用)

• Tab 1
• Tab 2
• Tab 3
• Tab 4

var scroll9 = new zScroll({
  container : '#scroll9',
	slideEffect : 'fade',
  style: 'blue',
  onChange : function(obj){
    $('.tab-bar li').eq(obj.activeIndex).addClass("selected").siblings().removeClass("selected");
  }
});
$('.tab-bar li').click(function(e){
  e.stopPropagation();
  var n = $(this).index();
  scroll9.toSlide(n);
  $(this).addClass('selected').siblings().removeClass('selected');
});
	

9、自定义翻页按钮(事件应用)

var scroll10 = new zScroll({
  container : '#scroll10',
  button : false
});
$('.btn-bar .btn-prev').click(function(){
  scroll10.slidePrev();
});
$('.btn-bar .btn-next').click(function(){
  scroll10.slideNext();
});
	

10、翻页按钮样式(number)

CSS：
#scroll11 .pagination {
  width:auto; left: auto;right: 0;
}
JS:
var scroll11 = new zScroll({
  container : '#scroll11',
  paginationType : 'number',
  autoplay : true,
  button : false,
  style : 'red'
});
	

11、翻页按钮样式(fraction)

CSS:
  #scroll12 .prevClass,#scroll12 .nextClass {
    top: auto; bottom: 2.5em;
  }
  #scroll12 .prevClass {
    left: 40%;
  }
  #scroll12 .nextClass {
    right: 40%;
  }
  #scroll12 .pagination > div {color: #fff;}
JS:
var scroll12 = new zScroll({
  container : '#scroll12',
  paginationType : 'fraction',
  autoplay : true
});
	

12、标题栏在下方(titlePosition:under)

CSS:
  #scroll13 .title {background-color:#f3f3f3;}
  #scroll13 .title a {color: #333;}
JS:
var scroll13 = new zScroll({
  container : '#scroll13',
  titlePosition : 'under'
});