Any List Scroller – 无限循环列表滚动插件

, , , ,
04/07/2014    任刚    插件

分享一个不错的jQuery插件“ Any List Scroller” 它能够根据任何内容、任何尺寸、任何列表产生可滚动效果。

Any List Scroller – 无限循环列表滚动插件 - 任刚 · Ren Gang 世界设计 · 设计世界

基础代码

<!-- 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>

「真诚赞赏,手留余香」

任刚 rengang.com.cn

赞助用于本站维护,手机长按识别二维码。

任刚(rengang.com.cn)整理分享,欣赏作品版权均归原作者所有,仅供学习交流。点击上方图标与好友分享!


发表评论

登 录 注 册