Camera幻灯片体验(配合JQuery mobile)

在JQuery插件库发现一款幻灯片插件：Camera，可以适配手机端 官方网址 http://www.pixedelic.com/plugins/camera/  最新的版本是v.1.3.4, 最后更新时间2012.06.23 显示效果如下：右上角是滚动播放的时间进度条，动画效果是随机的 在官网下载之后，在html引入文件

<link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'>
<script src="jquery.min.js">script>
<script type="text/javascript" src="jquery.easing.1.3.js">script>
<script type="text/javascript" src="camera.min.js">script>

在项目中使用的JQuery版本是1.10，不支持，所以在

<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js">script>

下面又引入了一个Camera官方demo的jquery，版本是1.7

<script src="jquery.min.js">script>

下面开始使用Camera

<script>jQuery(function(){jQuery('#camera_wrap_1').camera({thumbnails: true});});
script><div class="camera_wrap camera_azure_skin" id="camera_wrap_1"><div data-thumb="../images/slides/thumbs/bridge.jpg" data-src="../images/slides/bridge.jpg"><div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser windowem>div>div><div data-thumb="../images/slides/thumbs/leaf.jpg" data-src="../images/slides/leaf.jpg"><div class="camera_caption fadeFromBottom">It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingersem>div>div><div data-thumb="../images/slides/thumbs/road.jpg" data-src="../images/slides/road.jpg"><div class="camera_caption fadeFromBottom"><em>It's completely freeem> (even if a donation is appreciated)div>div><div data-thumb="../images/slides/thumbs/sea.jpg" data-src="../images/slides/sea.jpg"><div class="camera_caption fadeFromBottom">Camera slideshow provides many options <em>to customize your projectem> as more as possiblediv>div>
div>

 

在data-src里 配置好图片路径就会出现图片轮播的效果，data-thumb是小图标的路径，把鼠标放在图片下面的小点点上面就会出现小图标。 下面是关于camera的各种参数，只有一部分，转自 http://www.jq22.com/jquery-info1792 首先是图片上的参数: data-src: 图片路径 data-thumb: 缩略图路径 data-link: 图片链接 data-portrait: 显示图片的实际尺寸( "true", "false" ) data-slideOn: 渐隐效果( "next", "prev", "random" ) data-target: 链接打开的形式( "_blank", "_new", "_parent", "_self", "_top" ) data-time: 图片的显示时间( "可直接输入数字" ) data-video: 取消视频自动播放( "hide" ) 以上是图片的参数, 切记每条属性只针对的是一张图片. 下面是JS上的参数, 也就是控制整个幻灯片的 height: '' 幻灯片的高度 hover: 鼠标经过幻灯片时暂停(true, false) imagePath: 图片的目录 loader: 加载图标(pie, bar, none) loaderColor: 加载图标颜色( '颜色值,例如:#eee' ) loaderBgColor: 加载图标背景颜色 loaderOpacity: 加载图标的透明度( '.8'默认值, 其他的可以写 0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1 ) loaderPadding: 加载图标的大小( 填数字,默认为2 ) navigation: 左右箭头显示/隐藏(true, false) navigationHover: 鼠标经过时左右箭头显示/隐藏(true, false) pagination: 是否显示分页(true, false) playPause: 暂停按钮显示/隐藏(true, false) pauseOnClick: 鼠标点击后是否暂停(true, false) portrait: 显示幻灯片里所有图片的实际大小(true, false) thumbnails: 是否显示缩略图(true, false) time: 幻灯片播放时间( 填数字 ) transPeriod: 动画速度( 填数字 )

转载于:https://www.cnblogs.com/pp9527/p/5499600.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！