Demo4 Slides.js的使用
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="“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.” | Flickr - Photo Sharing!"
target="_blank">
<img src="Scripts/img/slide-5.jpg" width="" height="" alt="Slide 5"/></a>
<div class="caption">
<p>
“I must go down to the sea again, to the lonely sea and the sky...”</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>
© <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的使用的更多相关文章
- jquery.slides.js
http://slidesjs.com/#docs 一款强大的,专业的幻灯片组件,全方位对幻灯片的速度..全方位的控制: $(function(){ $("#slides").sl ...
- 你需要了解的JS框架
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 ...
- 前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
- 有了jsRender,妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了
写在前面 说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到 ...
- jQuery图片轮播特效
效果预览:http://hovertree.com/texiao/jquery/51/ 这款特效有缩略图,包含文字说明和链接,可以自动播放,也可以手动切换. 使用的jQuery库版本为1.12.3 , ...
- ReactJS学习笔记(一)
1.依赖的资源: <script type="text/javascript" src='../asset/react.js'></script> &l ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
- SlidesJS的使用
项目中对slideshow要求要有触屏滑动换图功能,就想到了SlidesJS这个Jquery插件 例排,先把静态html写好 <div id="cm_slides"> ...
- ASP.NET Web API 的简单示例
Demo1: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
随机推荐
- OpenCV学习笔记——多种Smooth平滑处理
opencv库提供了好几种模糊平滑Smooth操作的类型作为cvSmooth的参数传入,从而达到不同的平滑效果,另外复习了一下如何复制一份图像和重新调整图像大小. 调整图像大小目前是按照一下步骤进行: ...
- hdu1078 记忆化搜索
/* hdu 1078 QAQ记忆化搜索 其实还是搜索..因为里面开了一个数组这样可以省时间 (dp[x][y]大于0就不用算了直接返回值) */ #include<stdio.h> #i ...
- PHP 设计模式 笔记与总结(8)策略模式
① 策略模式,将一组特定的行为和算法封装成类,以适应某些特定的上下文环境,这种模式就是策略模式. ② 实际应用举例,假如一个电商网站系统,针对男性女性用户要各自跳转到不同的商品类目,并且所有广告位展示 ...
- 【翻译】西川善司的「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密,后篇
http://www.4gamer.net/games/216/G021678/20140714079/ 连载第2回的本回, Arc System Works开发的格斗游戏「GUILTY G ...
- 高手指南PHP安装配置
高手指南PHP安装配置 2014-11-05 12:57:13 来源: 评论:0 次 点击:12 次 | 发布人:登陆查看 PHP的快速发展,它的功能越来越强大,运用它也变得很方便,下面我 ...
- Front-end Developer Interview Questions
Front-end-Developer-Interview-Questions A list of helpful front-end related questions you can use to ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- 性能测试工具JMeter
JMeter介绍 Apache JMeter是Apache组织的开放源代码项目,具有极高的可扩展性,是一个100%纯Java桌面应用,用于压力/性能测试.JMeter可以用于测试静态或者动态资 ...
- 微信公众账号开发教程(一) 基本原理及微信公众账号注册 ——转自http://www.cnblogs.com/yank/p/3364827.html
微信公众账号开发教程 基本原理 在开始做之前,大家可能对这个很感兴趣,但是又比较茫然.是不是很复杂?很难学啊? 其实恰恰相反,很简单.为了打消大家的顾虑,先简单介绍了微信公众平台的基本原理. 微信服务 ...
- PowerDesigner连接MySQL,建立逆向工程图解
传说中,程序员们喜欢用powerDesign进行数据库建模.通常都是先设计出物理模型图,在转换出数据库需要的SQL语句,从而生成数据库.但,江湖中流传着"powerDesign逆向工程&qu ...