Slider.js轻量级图片播放控件_第1页
Slider.js轻量级图片播放控件_第2页
Slider.js轻量级图片播放控件_第3页
Slider.js轻量级图片播放控件_第4页
全文预览已结束

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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'

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论