Slides.js挺好用的啊，把示例中的Demo调试通了。首先把css、img、js文件夹下的内容全部拷贝到Vs网站项目下的Scripts文件夹下。

代码主要修改了一些图片路径和网址链接。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8" />

     <title>Slides, A Slideshow Plugin for jQuery</title>

     <link rel="stylesheet" href="Scripts/css/global.css" />

     <script src="Scripts/js/jquery-2.1.1.min.js" type="text/javascript"></script>

     <script src="Scripts/js/slides.min.jquery.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $('#slides').slides({

                 preload: true,

                 preloadImage: 'Scripts/img/loading.gif',

                 play: ,

                 pause: ,

                 hoverPause: true,

                 animationStart: function (current) {

                     $('.caption').animate({

                         bottom: -

                     }, );

                     if (window.console && console.log) {

                         // example return of current slide number

                         console.log('animationStart on slide: ', current);

                     };

                 },

                 animationComplete: function (current) {

                     $('.caption').animate({

                         bottom:

                     }, );

                     if (window.console && console.log) {

                         // example return of current slide number

                         console.log('animationComplete on slide: ', current);

                     };

                 },

                 slidesLoaded: function () {

                     $('.caption').animate({

                         bottom:

                     }, );

                 }

             });

         });

     </script>

 </head>

 <body>

     <div id="container">

         <div id="example">

             <img src="Scripts/img/new-ribbon.png" width="" height="" alt="New Ribbon" id="ribbon"/>

             <div id="slides">

                 <div class="slides_container">

                     <div class="slide">

                         <a href="http://www.cnblogs.com/yhlx125/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!"

                             target="_blank">

                             <img src="Scripts/img/slide-1.jpg" width="" height="" alt="Slide 1"/></a>

                         <div class="caption" style="bottom: 0">

                             <p>

                                 Happy Bokeh Thursday!</p>

                         </div>

                     </div>

                     <div class="slide">

                         <a href="http://www.cnblogs.com/yhlx125/" title="Taxi | Flickr - Photo Sharing!"

                             target="_blank">

                             <img src="Scripts/img/slide-2.jpg" width="" height="" alt="Slide 2"/></a>

                         <div class="caption">

                             <p>

                                 Taxi</p>

                         </div>

                     </div>

                     <div class="slide">

                         <a href="http://www.cnblogs.com/yhlx125/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!"

                             target="_blank">

                             <img src="Scripts/img/slide-3.jpg" width="" height="" alt="Slide 3"/></a>

                         <div class="caption">

                             <p>

                                 Happy Bokeh raining Day</p>

                         </div>

                     </div>

                     <div class="slide">

                         <a href="http://www.cnblogs.com/yhlx125/" title="We Eat Light | Flickr - Photo Sharing!"

                             target="_blank">

                             <img src="Scripts/img/slide-4.jpg" width="" height="" alt="Slide 4"/></a>

                         <div class="caption">

                             <p>

                                 We Eat Light</p>

                         </div>

                     </div>

                     <div class="slide">

                         <a href="http://www.cnblogs.com/yhlx125/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!"

                             target="_blank">

                             <img src="Scripts/img/slide-5.jpg" width="" height="" alt="Slide 5"/></a>

                         <div class="caption">

                             <p>

                                 &ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>

                         </div>

                     </div>

                     <div class="slide">

                         <a href="http://www.cnblogs.com/yhlx125/" title="twelve.inch | Flickr - Photo Sharing!"

                             target="_blank">

                             <img src="Scripts/img/slide-6.jpg" width="" height="" alt="Slide 6"/></a>

                         <div class="caption">

                             <p>

                                 twelve.inch</p>

                         </div>

                     </div>

                     <div class="slide">

                         <a href="http://www.cnblogs.com/yhlx125/" title="Save my love for loneliness | Flickr - Photo Sharing!"

                             target="_blank">

                             <img src="Scripts/img/slide-7.jpg" width="" height="" alt="Slide 7"/></a>

                         <div class="caption">

                             <p>

                                 Save my love for loneliness</p>

                         </div>

                     </div>

                 </div>

                 <a href="#" class="prev">

                     <img src="Scripts/img/arrow-prev.png" width="" height="" alt="Arrow Prev"/></a>

                 <a href="#" class="next">

                     <img src="Scripts/img/arrow-next.png" width="" height="" alt="Arrow Next"/></a>

             </div>

             <img src="Scripts/img/example-frame.png"  width="" height="" alt="Example Frame" id="frame"/>

         </div>

         <div id="footer">

             <p>

                 For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>

             <p>

                 Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">

                     Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/"

                         target="_blank">Premium Pixels</a></p>

             <p>

                 &copy;  <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>.

                 All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0"

                     target="_blank">Apache license</a>.</p>

         </div>

     </div>

 </body>

 </html>

运行效果如下：

Demo4 Slides.js的使用的更多相关文章

  1. jquery.slides.js

    http://slidesjs.com/#docs 一款强大的,专业的幻灯片组件,全方位对幻灯片的速度..全方位的控制: $(function(){ $("#slides").sl ...

  2. 你需要了解的JS框架

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js       用途:构建数据统计图表,兼容多浏览器 ...

  3. 前端开发需要了解的JS插件

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...

  4. 有了jsRender，妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了

    写在前面 说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到 ...

  5. jQuery图片轮播特效

    效果预览:http://hovertree.com/texiao/jquery/51/ 这款特效有缩略图,包含文字说明和链接,可以自动播放,也可以手动切换. 使用的jQuery库版本为1.12.3 , ...

  6. ReactJS学习笔记(一)

    1.依赖的资源: <script type="text/javascript" src='../asset/react.js'></script>   &l ...

  7. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  8. SlidesJS的使用

    项目中对slideshow要求要有触屏滑动换图功能,就想到了SlidesJS这个Jquery插件 例排,先把静态html写好 <div id="cm_slides"> ...

  9. ASP.NET Web API 的简单示例

    Demo1: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

随机推荐

  1. Hadoop及子项目备注

    Hadoop CommonHadoop体系最底层的一个模块,为Hadoop各子项目提供各种工具,如:配置文件和日志操作等. AvroAvro是doug cutting主持的RPC项目,有点类似Goog ...

  2. 新浪SAEStorage图片上传的demo和说明

    <?php if(isset($_POST[up])){ $s2 =new SaeStorage();//实例化 $name =$_FILES['myfile']['name'];//上传到服务 ...

  3. JDBC链接数据库版本三，使用C3P0，使用jar文件两个

    JdbcUtil类: package com.xiaohui.jdbc.util; import java.sql.Connection; import java.sql.PreparedStatem ...

  4. 《Java核心技术卷一》笔记 多线程

    有时,我们需要在一个程序中同时并行的处理多个任务,如播放器一边要播放音乐同时还要不断更新画面显示,或者是一边执行耗时任务,UI还能一边继续响应各种事件.还有的时候,一个任务需要很长时间才能完成,如果分 ...

  5. [DX11] Introduction

    http://www.cnblogs.com/clayman/archive/2011/10/18/2216889.html The Beauty of DirectX 11

  6. html 实体转换为字符：转换 UEditor 编辑器 ( 在 ThinkPHP 3.2.2 中 ) 保存的数据

    在 ThinkPHP 3.2.2 中使用 UEditor 编辑器保存文章内容时,数据库中保存的数据都被转义成实体,例如:&lt;p&gt;&lt;strong&gt;& ...

  7. 转载～vim配置文件

    转载自:小码哥的博客 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有以下优点: 1.按F5可以直接编译并执行C.C++.java代码以及执行shell脚本,按“F8”可进行C. ...

  8. GitHub超详细图文攻略

    GitHub超详细图文攻略 - Git客户端下载安装 GitHub提交修改源码工作流程 Git 分类: 转载2014-03-25 21:10 10641人阅读 评论(2) 收藏 举报 GitHubbr ...

  9. Python函数1

    Python 函数命令的使用 想想我们之前数学中学到的函数,首先我们需要定义一个函数,例如f(x)=x, 当x输入任意数的时候,f(x)都能输出和x相等的数值. 那么在Python中是如何实现的呢? ...

  10. delphi动态数组指针问题

    就一个button事件 procedure TForm1.btn7Click(Sender: TObject); Type TMyArr = array of array of array of In ...