ALS - 使用 jQuery 的内容滚动插件

版本:

浏览量:1359

最后更新：2021-09-07

应用标签：git MAC 软件 Jquery插件

推荐指数:

查看演示点击下载

详细信息

ALS ( Any List Scroll er ) 是一个 jQuery 插件，可用于滚动页面上的任何元素（文本、图像、列表...）。通过使用这个插件，这些元素可以水平或垂直滚动。

如何使用它：

1. 包含在 <head> 部分的文件：

<!-- basic ALS css -->
<link rel="stylesheet" type="text/css" media="screen" href="path/css/als_style.css" />
 
<!-- your jQuery version -->
<script type="text/javascript" src="path/js/jquery.min.js" ></script>
 
<!-- your ALS version -->
<script type="text/javascript" src="path/js/jquery.als.min.js" ></script>

2. 滚动条必要的样式。

.als-container {
  position: relative;
  width: 100%;
  margin: 0px auto;
}
 
.als-viewport {
  position: relative;
  overflow: hidden;
  margin: 0px auto;
}
 
.als-wrapper {
  position: relative;
  list-style: none;
}
 
.als-item {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
  float: left;
}
 
.als-prev, .als-next {
  position: absolute;
  cursor: pointer;
  clear: both;
}

3. 滚动条的 HTML 结构。

<!-- define a container with class "als-container": this will be the object binded to ALS; we suggest to give it an ID
to retrieve it easily during ALS inizialization -->
 
<div class="als-container" id="my-als-list">
 
<!-- if you choose manual scrolling (which is set by default), insert <span> with class "als-prev"  and "als-next":
they define the buttons "previous" and "next"; within the <span> you can use images or simple text -->
   
  <span class="als-prev"><img src="images/prev.png" alt="prev" title="previous" /></span>
 
<!-- define a container with class "als-viewport": this will be the viewport for the list visible elements -->
 
  <div class="als-viewport">
   
<!-- define a container with class "als-wrapper": this will be the wrapper for the list elements,
it can be a classic <ul> element or even a <div> element -->
 
    <ul class="als-wrapper">
 
<!-- define the list elements, each must have class "als-item"; they can be classic <li> elements
or generic <div> elements and they can contain anything: text, images, ... -->
 
      <li class="als-item">orange</li> <!-- text only -->
      <li class="als-item"><img src="images/fruits/apple.png" alt="apple" title="apple" /></li> <!-- image -->
      <li class="als-item"><img src="images/fruits/banana.png" alt="banana" title="banana" />banana</li> <!-- image + text -->
 
    </ul> <!-- als-wrapper end -->
  </div> <!-- als-viewport end -->
  <span class="als-next"><img src="images/next.png" alt="next" title="next" /></span> <!-- "next" button -->
</div> <!-- als-container end -->

4. 基本初始化

$(document).ready(function(){
  $("#my-als-list").als();
});

5. 自定义滚动条的可能选项。

// visible-items (number)
 
$("#my-als-list").als({
  visible_items: 4
});
 
// scrolling-items (number)
 
$("#my-als-list").als({
  scrolling_items: 2
});
 
// orientation (string)
 
$("#my-als-list").als({
  orientation: "vertical"
});
 
// circular (string)
 
$("#my-als-list").als({
  circular: "yes"
});
 
// autoscroll (stringa)
 
$("#my-als-list").als({
  autoscroll: "yes"
});
 
// interval (number)
 
$("#my-als-list").als({
  interval: 4000
});
 
// direction (string)
 
$("#my-als-list").als({
  direction: "down"
});

6. 所有默认插件选项。

visible_items: 3,
scrolling_items: 1,
orientation: "horizontal",
circular: "no",
autoscroll: "no",
interval: 4000,
speed: 600,
easing: "swing",
direction: "left",
start_from: 0