幻灯片/轮播
jQuery超实用文字和图片列表滚动插件
PetitQ
这是一款可以使任何图片列表进行水平和垂直滚动的 jQuery 插件。该 jquery 列表滚动插件可以使用任何列表、任何尺寸和任何内容。它可以设置水平和垂直滚动，自动滚动和无限循环滚动，非常适用于滚动新闻的制作。
HTML 结构：
在下面给出 html 结构中.als-container、.als-viewport、.als-wrapper 和.als-item 是必须的结构。.als-prev 和.als-next 是可选的。
也想出现在这里？联系我们吧
<!-- 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 -->
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 <ul> <li> */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;
}
调用插件：
首先要引入必要的文件。
<!-- 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-last.min.js" ></script>
<!-- your ALS version -->
<script type="text/javascript" src="path/js/jquery.als-1.6.min.js" ></script>
然后可以按下面的方法调用该插件：
<!-- in our example the container has id="my-als-list" thus ALS is initialized like this -->
<script type="text/javascript">
$(document).ready(function(){
$("#my-als-list").als();
});
</script>
可配参数：
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
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
