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. Shader Model 版本与DirectX的关系(OpenGL对应的呢?)

    http://blog.sina.com.cn/s/blog_6e521a600100q4dr.html DX9还是能支持到固定管线的,虽然说是在内部被转换成shader: DX10明确不再支持固定管 ...

  2. Web 在线文件管理器学习笔记与总结(8)删除文件

    unlink($filename) 删除文件 index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...

  3. ThinkPHP 3.2.2 视图模板中使用字符串截取函数

    在项目的 Common/function.php 文件里( 项目结构如图 ) 添加函数: /*字符串截断函数+省略号*/ function subtext($text, $length) { if(m ...

  4. RT-Thread的CPU使用率计算

    CPU 的使用率一般是我们比较关心的问题,在这里我们就用空闲线程的钩子函数去统计 CPU 的使用率,并通过串口打印出来.首先我们在初始化线程中设置好钩子函数,并在 LED 线程中给系统人为的加入很多“ ...

  5. 来到这里,我放弃了多少- UI基础-疯狂猜图,我们都疯狂了-

    小问题也要问 学习最重要的是 自律 我昨天晚上3点睡的, 这两天一点也没睡 0.99*0.99  每天差一点 日积月累就很多了 关键字,在字典里查一下,在类里面查查 瑞详博客下载器 跑步后精神多了,白 ...

  6. MillWheel: Fault-Tolerant Stream Processing at Internet Scale

    http://static.googleusercontent.com/media/research.google.com/zh-CN//pubs/archive/41378.pdf   为什么要做M ...

  7. Delphi 的绘图功能[1] - PolyBezier、PolyBezierTo

    双击代码全选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 unit Unit1; interface uses Windows, Messages, SysUtils ...

  8. 二进制流 最后一段数据是最后一次读取的byte数组没填满造成的

    while(in.read(temp)!=-1){ out.write(temp); } 改成: int len; while((len=in.read(temp))!=-1){out.write(t ...

  9. 【转】 使用Redis的Pub/Sub来实现类似于JMS的消息持久化

    http://blog.csdn.net/canot/article/details/52040415 关于个人对Redis提供的Pub/Sub机制的认识在上一篇博客中涉及到了,也提到了关于如何避免R ...

  10. java TimeUnit synchronized demo

    import java.util.concurrent.TimeUnit; public class TestCalc { private static boolean stopRequested=f ...