Slider.js基于HTML5和CSS3实现的Slideshow
1、Slider.js 是一个图片播放Slideshow引擎，采用jQuery、CSS3和HTML5 canvas技术实现。
2、可以为播放的条目设置文本标题并带链接，用户可以通过分页码或向前/向后链接进行浏览。
3、js代码开源，易懂。展示界面和交互都可以定制。
示例截图
slider.js及样式引入
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="../Slider/css/slider.css" rel="stylesheet" type="text/css" />
<script src="../Slider/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Slider/js/jQuery-easing.js" type="text/javascript"></script>
<script src="../Slider/js/jQuery-jcSlider.js" type="text/javascript"></script>
html代码
<div class="main-content">
<div id="pic_wrap" style="display: none">
<ul id="imgShow">
<li>
<div class="middle-out">
<div class="middle-in">
<img src="../Img/Chrysanthemum.jpg" width="573" height="300" />
</div>
<div align="center" style="margin-top: 5px; padding-top: 5px;">
Chrysanthemum
</div>
</div>
</li>
<li>
<div class="middle-out">
<div class="middle-in">
<img src="../Img/Desert.jpg" width="573" height="300"/>
</div>
<div align="center" style="margin-top: 5px; padding-top: 5px;">
Desert
</div>
</div>
</li>
<li>
<div class="middle-out">
<div class="middle-in">
<img src="../Img/Hydrangeas.jpg" width="573" height="300"/>
</div>
<div align="center" style="margin-top: 5px; padding-top: 5px;">
Hydrangeas
</div>
</div>
</li>
<li>
<div class="middle-out">
<div class="middle-in">
<img src="../Img/Jellyfish.jpg" width="573" height="300"/>
</div>
<div align="center" style="margin-top: 5px; padding-top: 5px;">
Jellyfish
</div>
</div>
</li>
</ul>
</div>
</div>
JS代码：
<script type="text/javascript">
$(function () {
$('#pic_wrap').jcSlider({
loading: false, //预加载loading开关设置，提供true,false
loadpic: '../Slider/img/loading.gif', //预加载loading图片路径，相对定位,如../img/riddick.png
play: true, //是否开起自动播放功能，提供true,false
play_speed: 2000, //自动播放速度设置，提供easing值 或 数值(mm)
slider_btn: true, //左右按钮开关，提供true,false
slider_speed: 500, //图片切换速度设置，提供easing值 或 数值(mm)
slider_num: true, //数字按钮开关，提供true,false
offset: 0, //设置左右按钮偏移量(px)
btn_event: 'mouseover', //数字按钮事件设置，提供click,mouseover等
btn_position: 'middle', //数字按钮位置，提供left,middle,right
num_offsetW: 0, //设置数字按钮的X偏移(px)
num_offsetH: 400, //设置数字按钮的Y偏移(px)
scaling: false, //是否设置图片大小，提供true,false
width: 956, //设置图片宽度单位(px)
height: 300, //设置图片高度单位(px)
sliderModle: 'xScroll'
});
var tagli = $("#imgShow li");
if (tagli.length > 0) {
$('#pic_wrap').css('display', 'block');
}
var _w1 = $('#pic_wrap').width();
var _w2 = $('#sliderNum').width();
$('#sliderNum').css('left', (_w1 - _w2) / 2);
});
</script>