Slider.js轻量级图片播放控件

Slider.js轻量级图片播放控件Slider.js基于HTML5和CSS3实现的Slideshow1、Slider.js是一个图片播放Slideshow引擎，采用jQuery、CSS3和HTML5canvas技术实现。2、可以为播放的条目设置文本标题并带链接，用户可以通过分页码或向前/向后链接进行浏览3、js代码开源，易懂。展示界面和交互都可以定制。示例截图slider.js及样式引入〈scriptsrc二"../Scripts/jquery-1.4.1.min.js"type="text/javascript">〈/script>〈linkhref二"../Slider/css/slider.css"rel="stylesheet"type="text/css"/><scriptsrc二"../Slider/js/jquery-1.7.2.min.js"type="text/javascript"></script><scriptsrc二"../Slider/js/jQuery-easing.js"type="text/javascript"></script><scriptsrc二"../Slider/js/jQuery-jcSlider.js"type="text/javascript"></script>html代码

<divclass二"main-content"><divid="pic_wrap"style二"display:none"〉<ulid="imgShow"><li><divclass二"middle-out"><divclass二"middle-in"><imgsrc二"../Img/Chrysanthemum.jpg"width二"573"height二"300"/></div><divalign二"center"style二"margin-top:5px;padding-top:5px;">Chrysanthemum</div></div></li><li><divclass二"middle-out"><divclass二"middle-in"><imgsrc二"../Img/Desert.jpg"width二"573"height二"300"/></div><divalign二"center"style二"margin-top:5px;padding-top:5px;">Desert</div></div></li><li><divclass="middle-out"><divclass二"middle-in"><imgsrc二"../Img/Hydrangeas.jpg"width二"573"height二"300"/></div><divalign="center"style二"margin-top:5px;padding-top:5px;">Hydrangeas</div></div></li><li><divclass="middle-out"><divclass二"middle-in"><imgsrc二"../Img/Jellyfish.jpg"width二"573"height二"300"/></div><divalign="center"style二"margin-top:5px;padding-top:5px;">Jellyfish</div></div></li>

</ul></div></div>JS代码〈scripttype="text/javascript">$(function(){$('#pic_wrap').jcSlider({loading:false,//预加载loading开关设置，提供true,falseloadpic:'../Slider/img/loading.gif',//预加载loading图片路径，相对定位，如../img/riddick.pngplay:true,//是否开起自动播放功能，提供true,falseplay_speed:2000,//自动播放速度设置，提供easing值或数值(mm)slider_btn:true,//左右按钮开关，提供true,falseslider_speed:500,//图片切换速度设置，提供easing值或数值(mm)slider_num:true,//数字按钮开关，提供true,falseoffset:0,//设置左右按钮偏移量(px)btn_event:'mouseover'.//数字按钮事件设置，提供click,:mouseover等btn_position:'middle'.//数字按钮位置，提供left,middle,rightnum_offsetW:0,//设置数字按钮的X偏移(px)num_offsetH:400,//设置数字按钮的Y偏移(px)scaling:false//是否设置图片大小，提供true,falsewidth:956,//设置图片宽度单位(px)height:300,//设置图片高度单位(px)sliderModle:'xScroll'});vartagli=$("#imgShowli");if(tagli.length>0){

$('#pic_wrap').css('display','block'