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

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="utf-8" />
  5.      <title>Slides, A Slideshow Plugin for jQuery</title>
  6.      <link rel="stylesheet" href="Scripts/css/global.css" />
  7.      <script src="Scripts/js/jquery-2.1.1.min.js" type="text/javascript"></script>
  8.      <script src="Scripts/js/slides.min.jquery.js" type="text/javascript"></script>
  9.      <script type="text/javascript">
  10.          $(function () {
  11.              $('#slides').slides({
  12.                  preload: true,
  13.                  preloadImage: 'Scripts/img/loading.gif',
  14.                  play: ,
  15.                  pause: ,
  16.                  hoverPause: true,
  17.                  animationStart: function (current) {
  18.                      $('.caption').animate({
  19.                          bottom: -
  20.                      }, );
  21.                      if (window.console && console.log) {
  22.                          // example return of current slide number
  23.                          console.log('animationStart on slide: ', current);
  24.                      };
  25.                  },
  26.                  animationComplete: function (current) {
  27.                      $('.caption').animate({
  28.                          bottom:
  29.                      }, );
  30.                      if (window.console && console.log) {
  31.                          // example return of current slide number
  32.                          console.log('animationComplete on slide: ', current);
  33.                      };
  34.                  },
  35.                  slidesLoaded: function () {
  36.                      $('.caption').animate({
  37.                          bottom:
  38.                      }, );
  39.                  }
  40.              });
  41.          });
  42.      </script>
  43.  </head>
  44.  <body>
  45.      <div id="container">
  46.          <div id="example">
  47.              <img src="Scripts/img/new-ribbon.png" width="" height="" alt="New Ribbon" id="ribbon"/>
  48.              <div id="slides">
  49.                  <div class="slides_container">
  50.                      <div class="slide">
  51.                          <a href="http://www.cnblogs.com/yhlx125/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!"
  52.                              target="_blank">
  53.                              <img src="Scripts/img/slide-1.jpg" width="" height="" alt="Slide 1"/></a>
  54.                          <div class="caption" style="bottom: 0">
  55.                              <p>
  56.                                  Happy Bokeh Thursday!</p>
  57.                          </div>
  58.                      </div>
  59.                      <div class="slide">
  60.                          <a href="http://www.cnblogs.com/yhlx125/" title="Taxi | Flickr - Photo Sharing!"
  61.                              target="_blank">
  62.                              <img src="Scripts/img/slide-2.jpg" width="" height="" alt="Slide 2"/></a>
  63.                          <div class="caption">
  64.                              <p>
  65.                                  Taxi</p>
  66.                          </div>
  67.                      </div>
  68.                      <div class="slide">
  69.                          <a href="http://www.cnblogs.com/yhlx125/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!"
  70.                              target="_blank">
  71.                              <img src="Scripts/img/slide-3.jpg" width="" height="" alt="Slide 3"/></a>
  72.                          <div class="caption">
  73.                              <p>
  74.                                  Happy Bokeh raining Day</p>
  75.                          </div>
  76.                      </div>
  77.                      <div class="slide">
  78.                          <a href="http://www.cnblogs.com/yhlx125/" title="We Eat Light | Flickr - Photo Sharing!"
  79.                              target="_blank">
  80.                              <img src="Scripts/img/slide-4.jpg" width="" height="" alt="Slide 4"/></a>
  81.                          <div class="caption">
  82.                              <p>
  83.                                  We Eat Light</p>
  84.                          </div>
  85.                      </div>
  86.                      <div class="slide">
  87.                          <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!"
  88.                              target="_blank">
  89.                              <img src="Scripts/img/slide-5.jpg" width="" height="" alt="Slide 5"/></a>
  90.                          <div class="caption">
  91.                              <p>
  92.                                  &ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>
  93.                          </div>
  94.                      </div>
  95.                      <div class="slide">
  96.                          <a href="http://www.cnblogs.com/yhlx125/" title="twelve.inch | Flickr - Photo Sharing!"
  97.                              target="_blank">
  98.                              <img src="Scripts/img/slide-6.jpg" width="" height="" alt="Slide 6"/></a>
  99.                          <div class="caption">
  100.                              <p>
  101.                                  twelve.inch</p>
  102.                          </div>
  103.                      </div>
  104.                      <div class="slide">
  105.                          <a href="http://www.cnblogs.com/yhlx125/" title="Save my love for loneliness | Flickr - Photo Sharing!"
  106.                              target="_blank">
  107.                              <img src="Scripts/img/slide-7.jpg" width="" height="" alt="Slide 7"/></a>
  108.                          <div class="caption">
  109.                              <p>
  110.                                  Save my love for loneliness</p>
  111.                          </div>
  112.                      </div>
  113.                  </div>
  114.                  <a href="#" class="prev">
  115.                      <img src="Scripts/img/arrow-prev.png" width="" height="" alt="Arrow Prev"/></a>
  116.                  <a href="#" class="next">
  117.                      <img src="Scripts/img/arrow-next.png" width="" height="" alt="Arrow Next"/></a>
  118.              </div>
  119.              <img src="Scripts/img/example-frame.png"  width="" height="" alt="Example Frame" id="frame"/>
  120.          </div>
  121.          <div id="footer">
  122.              <p>
  123.                  For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>
  124.              <p>
  125.                  Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">
  126.                      Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/"
  127.                          target="_blank">Premium Pixels</a></p>
  128.              <p>
  129.                  &copy;  <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>.
  130.                  All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0"
  131.                      target="_blank">Apache license</a>.</p>
  132.          </div>
  133.      </div>
  134.  </body>
  135.  </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. Sql Group by 使用

    CREATE TABLE StuCourseScore ( ID int, Name nvarchar(10), Course nvarchar(10), Score int ) INSERT Stu ...

  2. discuz怎么根据连接知道调用的是什么模板页面

    其实不怎么难,基本都可以看出discuz是怎么样调用模板页面的 这个是论坛的帖子的列表页,看到url就可以看出是forum目录下的forumdisplay这个模板,forumdisplay.html这 ...

  3. [ZZ] GTX760首测

    再一次让AMD难做!NVIDIA新主力GTX760首测 1又见短板高端显卡,GTX760外观对比回顶部 [PConline评测]NVIDIA迅速的步伐真让人吃惊,短时间内拿出GTX780.GTX770 ...

  4. Apache Spark源码走读之22 -- 浅谈mllib中线性回归的算法实现

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本文简要描述线性回归算法在Spark MLLib中的具体实现,涉及线性回归算法本身及线性回归并行处理的理论基础,然后对代码实现部分进行走读. 线性回归模型 ...

  5. MySQL 授权远程登录（Ubuntu 环境）

    环境:Ubuntu 13.10 (GNU/Linux 3.11.0-12-generic i686) 在用 Navicat 连接远程数据库时报错: ERROR (HY000): Host *** is ...

  6. adId、idfv

    //广告标示符,适用于对外:例如广告推广,换量等跨应用的用户追踪等. NSString *adId = [[[ASIdentifierManager sharedManager] advertisin ...

  7. WPF 最大化最小化窗口

    public static void FullOrMin(this Window window)        {            //如果是全屏,则最小化            if (win ...

  8. Centos下使用Heartbeat实现集群[转]

    Linux 包括 CentOS 下高可用性（HA：High Availability）集群方案很多，而 Heartbeat 是比较常见和性价比比较高的一种。一、硬件及网络连接 群集一般需要2台以上服务 ...

  9. Nginx配置文件详细说明[转]

    在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收集与网络. #运行用户user www-data;    #启动进程,通常设置成和cpu的数量相等worker_process ...

  10. 蓝牙—GAP(Generic Access Profile)

    1.简介 下图可见GAP在蓝牙协议中的位置和关系 LE中GAP共有四个角色: <1> Boradcaster:发送advertising 事件的设备 <2>Observer:接 ...