Xslider.js 代码（需引用jquery）
/**
* @package Xslider - A slider plugin for jQuery
* @version 0.5
* @author xhowhy <http://x1989.com>
**/
;(function($){
$.fn.Xslider = function(options){var settings ={
boxname: '#slider',
affect: 'scrollx', //效果 有scrollx|scrolly|fade|none
speed: 1200, //动画速度
space: 3000, //时间间隔
auto: false, //true 自动滚动
trigger: 'mouseover', //触发事件 注意用mouseover代替hover
conbox: '.conbox', //内容容器id或class
ctag: 'a', //内容标签 默认为<a>
switcher: '.switcher', //切换触发器id或class
stag: 'a', //切换器标签 默认为a
current:'cur', //当前切换器样式名称
rand:true // false 是否随机指定默认幻灯图片
};
settings = $.extend({}, settings, options);
var index = 1;
var last_index = 0;
var $conbox = $(this).find(settings.conbox),$contents = $conbox.find(settings.ctag);
var $switcher = $(this).find(settings.switcher),$stag = $switcher.find(settings.stag);
if(settings.rand) {index = Math.floor(Math.random()*$contents.length);slide();}
if(settings.affect == 'fade'){$.each($contents,function(k, v){(k === 0) ? $(this).css({'position':'absolute','z-index':9}):$(this).css({'position':'absolute','z-index':1,'opacity':0});
});
}
function slide(){if (index >= $contents.length) index = 0;
$stag.removeClass(settings.current).eq(index).addClass(settings.current);
//alert(settings.boxname);
switch(settings.affect){
case 'scrollx':
$conbox.width($contents.length*$contents.width());
$conbox.stop().animate({left:-$contents.width()*index},settings.speed);
break;
case 'scrolly':
$contents.css({display:'block'});
$conbox.stop().animate({top:-$contents.height()*index+'px'},settings.speed);
break;
case 'fade':
$contents.eq(last_index).stop().animate({'opacity': 0}, settings.speed/2).css('z-index',1)
.end()
.eq(index).css('z-index',9).stop().animate({'opacity': 1}, settings.speed/2)
break;
case 'none':
$contents.hide().eq(index).show();
break;
}
last_index = index;
index++;
};
if(settings.auto) var Timer = setInterval(slide, settings.space);
//if(settings.auto){
// index = $(this).index();
// slide();
// };
$stag.bind(settings.trigger,function(){
_pause();
index = $(this).index();
slide();
_continue();
});
//$conbox.hover(_pause,_continue);//鼠标经过容器时停止 注释掉此句 鼠标经过容器 继续播放
function _pause(){
clearInterval(Timer);
}
function _continue(){
if(settings.auto)Timer = setInterval(slide, settings.space);
}
}
})(jQuery);
<div id="demopage">
<h2>焦点图片淡隐淡现</h2>
<div id="slider3" class="slider">
<div class="conbox">
<div style="position: absolute; z-index: 1; opacity: 0;"><a href="http://www.17sucai.com/" title="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示"><img alt="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示" src="demo_files/4ffecc68cb780d1801f19db52d38cabd.jpg" width="620" height="340"></a></div>
<div style="position: absolute; z-index: 1; opacity: 0;"><a href="http://www.17sucai.com/" title="常见问题解答部分动态读取数据 web / jQuery的，雅虎及谷歌文件"><img alt="常见问题解答部分动态读取数据 web / jQuery的，雅虎及谷歌文件" src="demo_files/9fae30738c94fb8e47dd2ba3e6003290.jpg" width="620" height="340"></a></div>
<div style="position: absolute; z-index: 9; opacity: 1;"><a href="http://www.17sucai.com/" title="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的"><img alt="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的" src="demo_files/44b91d75de385dc1a70fe56600f41e52.jpg" width="620" height="340"></a></div>
<div style="position: absolute; z-index: 1; opacity: 0;"><a href="http://www.17sucai.com/" title="jquery 幻灯片效果制作防苹果风格的开机画面"><img alt="jquery 幻灯片效果制作防苹果风格的开机画面" src="demo_files/85dc407af2b2f7bfbbcb025a0ee0d66e.jpg" width="620" height="340"></a></div>
<div style="position: absolute; z-index: 1; opacity: 0;"><a href="http://www.17sucai.com/" title="jquery制作创建动画404页面"><img alt="jquery制作创建动画404页面" src="demo_files/323ce4b13f72648e096bd1a86cba762a.jpg" width="620" height="340"></a></div>
</div>
<div class="switcher">
<a href="#" class="">1</a>
<a class="" href="#">2</a>
<a class="cur" href="#">3</a>
<a class="" href="#">4</a>
<a class="" href="#">5</a>
</div>
</div><!--slider end-->
<h2>焦点图片水平滚动</h2>
<div id="slider1" class="slider">
<div style="width: 3100px; left: -620px;" class="conbox">
<div><a href="http://www.17sucai.com/" title="jquery 3D图片滚动一个漂亮的手机软件网站图片展示"><img alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="demo_files/c9cfb68c13cbe925d3c9a03912f3b1de.jpg" width="620" height="340"></a></div>
<div><a href="hhttp://www.17sucai.com/" title="jquery 分类搜索框防谷歌网站搜索页面"><img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/310772035582a551c3afd8f6cc071409.jpg" width="620" height="340"></a></div>
<div><a href="http://www.17sucai.com/" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件"><img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/f4fe9dd611bd459c0244159163109bc4.jpg" width="620" height="340"></a></div>
<div><a href="http://www.17sucai.com/" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示"><img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/323ce4b13f72648e096bd1a86cba762a.jpg" width="620" height="340"></a></div>
<div><a href="http://www.17sucai.com/" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息"><img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/9fae30738c94fb8e47dd2ba3e6003290.jpg" width="620" height="340"></a></div>
</div>
<div class="switcher">
<a href="#" class="">1</a>
<a class="cur" href="#">2</a>
<a class="" href="#">3</a>
<a class="" href="#">4</a>
<a class="" href="#">5</a>
</div>
</div><!--slider end-->
<h2>焦点图片垂直滚动</h2>
<div id="slider2" class="slider">
<div style="top: 0px;" class="conbox">
<div style="display: block;"><a href="http://www.17sucai.com/" title="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示"><img alt="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示" src="demo_files/f23be4d33f61fda6d1769258ba6f48fb.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="http://www.17sucai.com/" title="常见问题解答部分动态读取数据 web / jQuery的，雅虎及谷歌文件"><img alt="常见问题解答部分动态读取数据 web / jQuery的，雅虎及谷歌文件" src="demo_files/85dc407af2b2f7bfbbcb025a0ee0d66e.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="http://www.17sucai.com/" title="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的"><img alt="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的" src="demo_files/44b91d75de385dc1a70fe56600f41e52.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="http://www.17sucai.com/" title="jquery 幻灯片效果制作防苹果风格的开机画面"><img alt="jquery 幻灯片效果制作防苹果风格的开机画面" src="demo_files/4ffecc68cb780d1801f19db52d38cabd.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="http://www.17sucai.com/" title="jquery制作创建动画404页面"><img alt="jquery制作创建动画404页面" src="demo_files/fd4767d55565e368f7c380f1b80cb878.jpg" width="620" height="340"></a></div>
</div>
<div class="switcher">
<a href="#" class="cur">1</a>
<a class="" href="#">2</a>
<a class="" href="#">3</a>
<a class="" href="#">4</a>
<a class="" href="#">5</a>
</div>
</div><!--slider end-->
<h2>选项卡</h2>
<div id="slider4" class="slider">
<div class="conbox">
<div style="display: none;"><a href="http://www.17sucai.com/" title="jquery 3D图片滚动一个漂亮的手机软件网站图片展示"><img alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="demo_files/c9cfb68c13cbe925d3c9a03912f3b1de.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="hhttp://www.17sucai.com/" title="jquery 分类搜索框防谷歌网站搜索页面"><img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/310772035582a551c3afd8f6cc071409.jpg" width="620" height="340"></a></div>
<div style="display: none;"><a href="http://www.17sucai.com/" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件"><img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/f4fe9dd611bd459c0244159163109bc4.jpg" width="620" height="340"></a></div>
<div style="display: none;"><a href="http://www.17sucai.com/" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示"><img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/323ce4b13f72648e096bd1a86cba762a.jpg" width="620" height="340"></a></div>
<div style="display: none;"><a href="http://www.17sucai.com/" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息"><img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/9fae30738c94fb8e47dd2ba3e6003290.jpg" width="620" height="340"></a></div>
</div>
<div class="switcher">
<a href="#" class="">1</a>
<a class="cur" href="#">2</a>
<a class="" href="#">3</a>
<a class="" href="#">4</a>
<a class="" href="#">5</a>
</div>
</div><!--slider end-->
</div>
$(document).ready(function(){
// 焦点图片水平滚动
$("#slider1").Xslider({
// 默认配置
boxname: '#slider1',
affect: 'scrollx', //效果 有scrollx|scrolly|fade|none
speed: 800, //动画速度
space: 3000, //时间间隔
auto: true , //true 自动滚动
trigger: 'mouseover', //触发事件 注意用mouseover代替hover
conbox: '.conbox', //内容容器id或class
ctag: 'div', //内容标签 默认为<a>
switcher: '.switcher', //切换触发器id或class
stag: 'a', //切换器标签 默认为a
current:'cur', //当前切换器样式名称
rand:false //是否随机指定默认幻灯图片
});
// 焦点图片垂直滚动
$("#slider2").Xslider({
boxname: '#slider2',
affect:'scrolly',
ctag: 'div',
auto: false, //自动滚动
speed:400
});
// 焦点图片淡隐淡现
$("#slider3").Xslider({
boxname: '#slider3',
affect:'fade',
ctag: 'div'
});
// 选项卡
$("#slider4").Xslider({
boxname: '#slider4',
affect:'none',
ctag: 'div',
speed:10
});
});
