基础代码
<!-- 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
/***************************************************** * 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({ visible_items: 4, scrolling_items: 2, orientation: "horizontal", circular: "yes", autoscroll: "yes", interval: 6000, speed: 400, easing: "linear", direction: "right", start_from: 1 }); }); </script>" />