jQuery超实用文字和图片列表滚动插件

这是一款可以使任何文字和图片列表进行水平和垂直滚动的jQuery插件。该jquery图片滚动插件的特点和一些注意事项如下：

• 使用非常简单。
• 可以在任何形式的列表。
• 列表中的元素可以是文字、图片等等。
• 列表中的元素不能是固定定位，或者是相同的元素。
• 列表元素可以水平或垂直滚动。
• 可以使列表简单滚动或无限循环滚动。
• 可以手动滚动列表，也可是设置为自动滚动。
• 可以设置可见列表项的数量。
• 可以设置每次滚动的步长。
• 可以设置开始滚动的列表项。
• 可以在同一个页面中重复使用该插件。
• 可以设置滚动速度和滚动的"easing"效果。
• 它支持触摸屏设备。

使用方法

工作原理

先用一张图来描述该jQuery插件的工作原理。

基本HTML结构

在下面给出html结构中.als-container、.als-viewport、.als-wrapper和.als-item是必须的结构。.als-prev和.als-next是可选的。

 
  
  



  

  


    

orange
 
      
 
      

banana
 

    

 
   
 
                

CSS样式

建议使用下面的CSS样式作为该列表滚动jQuery插件的通用样式，然后再各种情况设置不同元素的样式。

/*****************************************************
 * generic styling for ALS elements: outer container
 *****************************************************/
.als-container {
  position: relative;
  width: 100%;
  margin: 0px auto;
  z-index: 0;
}
/****************************************
 * viewport styling
 ***************************************/
.als-viewport {
  position: relative;
  overflow: hidden;
  margin: 0px auto;
}
/***************************************************
 * wrapper styling
 **************************************************/
.als-wrapper {
  position: relative;
  /* if you are using a list with 

• */ list-style: none; } /************************************* * item: single list element ************************************/ .als-item { position: relative; display: block; text-align: center; cursor: pointer; float: left; } /*********************************************** * prev, next: buttons styling **********************************************/ .als-prev, .als-next { position: absolute; cursor: pointer; clear: both; }

  调用插件

  首先要引入必要的文件。

  然后可以按下面的方法调用该插件：

  可配置参数

  • visible_items (number)：列表中可见列表项的数量。接收整数值，默认值为3。
  • scrolling_items (number)：列表元素滚动的步长。接收整数值，默认值为1。
  • orientation (string)：定义列表的方向。可以是水平或垂直。接收值： "horizontal" 和 "vertical"，默认值为："horizontal"。
  • circular (string)：定义列表滚动的类型：简单或无限循环。接收值： "yes" and "no"，默认值为："no"。
  • autoscroll (string)：定义列表滚动的状态：手动还是自动。接收值："yes" and "no"，默认值为："no"。
  • interval (number)：定义当设置为自动模式时滚动间隔的时间。接收值：integers，默认值：5000。
  • direction (string)：定义当设置为自动模式时的滚动方向。接收值："left" 和 "right"（水平滚动）或 "up" 和 "down"（垂直滚动）。默认值： "left" ("up")。
  • start_from (number) ：设置列表中的第一个可见元素。接收值：integers，如果该数字大于列表项总数和可见列表项之间的差值，将被置为0。默认值为0（第一个元素）。
  • speed (number) ：设置滚动的速度。接收值：integers，默认值：600。
  • easing (string)：设置滚动动画的easing效果。接收值： "swing" 和 "linear"。默认值： "swing"。

  多参数应用举例

  在这个例子中我们有4个可见列表元素，滚动步长为2，滚动方向为水平方向，无限循环滚动并且自动循环模式，时间间隔为6秒，滚动速度为400毫秒，easing效果为 "linear" ，列表从右向左滚动，开始列表项为第二个元素。

  $("#my-als-list").als({
    visible_items: 4,
    scrolling_items: 2,
    orientation: "horizontal",
    circular: "yes",
    autoscroll: "yes",
    interval: 6000,
    speed: 400,
    easing: "linear",
    direction: "right",
    start_from: 1
  });