<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XScroll.js:JavaScript可重用的图片幻灯片切换函数</title>
<style type="text/css">
ul,li{margin:0;padding:0;}
img {border:none;}
pre {padding:1em; background-color:#f0f0f0; border:1px solid #ccc; font-size:12px;width:600px;margin:1em 0; white-space:normal; word-break:break-all; display:block;}
ul li {list-style:none;}
h1,h2 {font-family:'微软雅黑';font-size:16px;}
h2{border-left:5px solid #abc; padding-left:1em;}
span.red {color:#f00;}
.about {border:1px solid #000; float:right; padding:1em; width:300px;}
.XScrollContaner {overflow:hidden; position:relative;}
.XScrollContaner .XScrollItems {position:absolute;z-index:5; display:none; top:0; left:0 }
.XScrollContaner .XScrollNow { display:block; z-index:10; }
#idSlider2,#idSlider2 img { width:450px;height:296px;}
#idSlider3,#idSlider3 img {width:350px; height:230px;}
#idSlider4,#idSlider4 img {width:480px; height:280px;}
#idSlider2,#idSlider3,#idSlider4 {overflow:hidden; position:relative;}
</style>
</head>
<body>
<style type="text/css">
.num{ position:absolute; right:5px; bottom:5px; z-index:20;}
.num li{
float: left;
list-style:none;
color: #fff;
text-align: center;
line-height: 20px;
width: 20px;
height: 20px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
margin: 1px;
background-color: #060a0b;
}
.num li.on{
font-size: 14px;
background-color: #ce0609;
font-weight: bold;
}
#idContainer2 {
width:450px; height:296px;
overflow:hidden; position:relative;
}
</style>
<h1 style="background-color:#234;color:#fff;padding:0.5em">
XScroll.js，是一个用来实现图片幻灯片切换效果（焦点图切换）的Javascript类，提供下载：<a href="http://jb51.net" target="_blank" style="color:#f78">jb51.net</a></h1>
<br />
支持<span class="red">17种</span>切换效果 <br />
<div class="about">
<h1>切换效果参数：</h1>
<ol>
<li>支持5种基本切换效果，但后4种效果分别有上下左右4个方向</li>
<li>how:切换效果。0淡入淡出，1两张图片同时滚动，2当前图片不动，下一张图片覆盖上来，3当前图片飞走，显示出下一张；4当前图片与下一张图片反向拉伸，然后回切，完成切换. </li>
<li>direct:方向，值为0123，分别表示左上右下，默认为0.在how参数<span class="red">不为0</span>时有效</li>
<li>delay:自动滚动间隔时间。默认为4000</li>
<li>step:滚动步长。当滚动方向是水平时，step会默认为slider元素的offsetWidth；当滚动方向是垂直时，则默认为offsetHeight。当然，也可以自己设置</li>
<li>pager:值应该是一个元素的id,指定slider的页码翻页元素。指定后XScroll会为此标签的第一层子元素添加跳转函数</li>
<li>how与direct搭配使用. </li>
</ol>
<h2>更新日志</h2>
<ol>
<li>2012-4-13:更新至0.2版，实现了how参数值为4的切换效果，并优化了代码效率，总代码量：10.2KB。更新日志</li>
</ol>
<!--
-1: 无效果，直接切换 <br />
0：淡入淡出<br />
1: 前一张下一张同时滚动<br />
2：前一张不动，下一张覆盖上来 <br />
3：前一张飞出，显示出下一张 <br />
4：前后反向运动，然后回切 <br />
5：同1，带0 <br />
6：同2，带0 <br />
7：同3，带0 <br />
8：同4，带0 <br />
-->
</div>
<br />
由于一屏内同时进行几个图片切换实在是对显卡有不小的考验，所以我加大了各图片区之间的间隔。见谅。
<br />
<h2>新的图片切换效果：交错切换，方向：向上，自动，带页码翻页，不带上下页，鼠标经过时暂停</h2>
代码：
<pre>
var xscroll = XScroll('idSlider2',{delay:3000,how:4, direct:1,Tween:Tween.CircOut,pager:'slider2p'});
</pre>
<div class="container" id="idContainer2">
<ul id="idSlider2">
<li><a href="http://jb51.net/"><img src="images/s1.jpg"/></a></li>
<li><a href="http://jb51.net/"><img src="images/s2.jpg"/></a></li>
<li><a href="http://jb51.net/"><img src="images/s3.jpg"/></a></li>
<li><a href="http://jb51.net/"><img src="images/s4.jpg"/></a></li>
</ul>
<ul id="slider2p" class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<br />
更多切换效果请下拉
<br />
<br />
<br />
<br />
<br />
<h2>此例只有两张图片互相切换,并带标题。切换效果为：淡入淡出</h2>
<pre>var x2 = XScroll('idSlider3',{direct:3,how:2,ing:30 });</pre>
<ul id="idSlider3">
<li><a href="http://jb51.net/"><img src="images/s1.jpg"/></a>
<strong>1XScroll.js图片切换类1</strong>
</li>
<li><a href="http://jb51.net/"><img src="images/s2.jpg"/></a>
<strong>2XScroll.js图片切换类2</strong>
</li>
</ul>
<style type="text/css">
#idSlider3 li strong {position:absolute; top:0;left:0;width:350px;height:24px;opacity:0.8;filter:Alpha(Opacity=80);z-index:19; background-color:#fff; font-size:12px;line-height:24px;padding-left:1em;}
</style>
<h2>仿曾经的淘宝电器城的一个切换</h2>
<pre>var taobao3 = XScroll('idSlider4',{direct:1,how:1,delay:3000,pager:'taobaopage'});</pre>
<div id="taobaolike">
<ul id="idSlider4">
<li><a href="http://jb51.net/"><img src="images/s3.jpg"/></a></li>
<li><a href="http://jb51.net/"><img src="images/s4.jpg"/></a></li>
<li><a href="http://jb51.net/"><img src="images/s1.jpg"/></a></li>
</ul>
<div id="taobaopage">
<a href="#" class="on">仿淘宝电器城切换0</a>
<a href="#">仿淘宝电器城切换1</a>
<a href="#">仿淘宝电器城切换2</a>
</div>
</div>
<style type="text/css">
#taobaolike {position:relative;width:480px;height:280px; overflow:hidden;}
#taobaolike #taobaopage {position:absolute;height:22px; bottom:0; left:0; width:481px;z-index:19;}
#taobaolike #taobaopage a {display:block;float:left; width:160px;font-size:12px;color:#000; text-align:center; text-decoration:none;line-height:22px;background-color:#fff;opacity:0.5;filter:Alpha(Opacity=50);}
#taobaolike #taobaopage a.on {opacity:0.8;filter:Alpha(Opacity=80);}
</style>
<h2>扩展出带上下页按钮的幻灯片切换,不自动</h2>
代码：
<pre>
var sx = XScroll('idSlider5',{direct:3,how:3,delay:5000,auto:false });
(function(){
var shang = _.id('shang'),xia = _.id('xia');
shang.onclick = function(){
sx.Prev();
}
xia.onclick = function(){
sx.Next();
}
})()
</pre>
<div class="sx">
<ul id="idSlider5">
<li><a href="http://jb51.net/"><img src="images/s3.jpg"/></a></li>
<li><a href="http://jb51.net/"><img src="images/s2.jpg"/></a></li>
<li><a href="http://jb51.net/"><img src="images/s1.jpg"/></a></li>
</ul>
<a href="javascript:void(0)" id="shang"><<</a>
<a href="javascript:void(0)" id="xia">>></a>
</div>
<style type="text/css">
.sx,#idSlider5,#idSlider5 img { width:400px;height:230px; overflow:hidden;}
.sx {position:relative;}
#shang ,#xia {position:absolute; z-index:19; width:24px;height:230px;text-align:center;line-height:230px;background-color:#fff;top:0;text-decoration:none; font-size:12px;opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}
#shang { left:0px;}
#xia { right:0px;}
#shang:hover ,#xia:hover{opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}
</style>
<!---->
<br />
<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="XScroll.js"></script>
<script type="text/javascript">
var xscroll = XScroll('idSlider2',{delay:3000,how:4,direct:1,Tween:Tween.QuartOut,pager:'slider2p'});
var x2 = XScroll('idSlider3',{how:0,ing:30 });
var taobao3 = XScroll('idSlider4',{direct:1,how:1,delay:3000,pager:'taobaopage'});
var sx = XScroll('idSlider5',{direct:3,how:3
