jQuery Mobile图片轮转轮播

简介: <p>最近一直很忙,刚抽出一点时间,来看了一下camera,非常好用,这里分享一下,与大家共勉!</p> <p></p><pre code_snippet_id="484636" snippet_file_name="blog_20141015_1_8411998" name="code" class="html"><!DOCTYPE html><html>

最近一直很忙,刚抽出一点时间,来看了一下camera,非常好用,这里分享一下,与大家共勉!

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
    <title>涛哥伪专家图片播放器</title> 
    <meta name="description" content="Camera a free jQuery slideshow with many effects, transitions, adaptive layout, easy to customize, using canvas and mobile ready"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
    <style>
		body {
			margin: 0;
			padding: 0;
		}
		a {
			color: #09f;
		}
		a:hover {
			text-decoration: none;
		}
		#back_to_camera {
			clear: both;
			display: block;
			height: 80px;
			line-height: 40px;
			padding: 20px;
		}
		.fluid_container {
			margin: 0 auto;
			max-width: 1000px;
			width: 90%;
		}
	</style>

    
    <script type='text/javascript' src='scripts/jquery.min.js'></script>
    <script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='scripts/camera.js'></script> 
    
    <script>
		jQuery(function(){
			
			jQuery('#camera_wrap_3').camera({
				height: '56%',
				pagination: false,
				thumbnails: true,
				imagePath: 'images/'
			});

		});
	</script>
 
</head>
<body>
	<div class="fluid_container">
    	<p>涛哥伪专家图片播放器</p>
        <div class="camera_wrap camera_emboss" id="camera_wrap_3">
            <div data-thumb="images/slides/thumbs/big_bunny_fake.jpg" data-src="images/slides/big_bunny_fake.jpg">
            	<iframe src="http://download.csdn.net/download/xmt1139057136/8037221" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
            </div>
            <div data-thumb="images/slides/thumbs/leaf.jpg" data-src="images/slides/leaf.jpg">
                <div style="position:absolute; top:5%; left:5%; background:#000; color:#fff; padding:5px; width:25%" class="fadeIn camera_effected">涛哥伪专家图片播放器</div>
            </div>
            <div data-thumb="images/slides/thumbs/road.jpg" data-src="images/slides/road.jpg" data-time="1500" data-trasPeriod="4000" data-link="http://www.google.com/" data-target="_blank">
                <div class="camera_caption fadeFromBottom">
                                          	涛哥伪专家图片播放器
                </div>
            </div>
        </div>
	
    </div>
    
    <div style="clear:both; display:block; height:100px"></div>
</body> 
</html>
看看效果:

android和iPhone全兼容!

如有疑问,请加qq群:135430763 共同学习!

点击资源下载http://download.csdn.net/download/xmt1139057136/8037221

目录
相关文章
|
1月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
17 1
jQuery+CSS3自动轮播焦点图特效源码
|
3月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
3月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
40 1
|
7月前
|
JavaScript
jQuery lazyload.js 懒加载可视范围图片
jQuery lazyload.js 懒加载可视范围图片
39 0
|
5月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
63 0
jQuery点击图片来回切换功能
|
5月前
|
JavaScript 数据库
jQuery点击图片开启,再次点击图片关闭效果
jQuery点击图片开启,再次点击图片关闭效果
19 0
|
5月前
|
JavaScript 前端开发 数据处理
jQuery数据结构渲染(1):图片数组的渲染
jQuery数据结构渲染(1):图片数组的渲染
38 1
|
5月前
|
JavaScript
jQuery动态拼接多张图片并且获取每张图片名称
jQuery动态拼接多张图片并且获取每张图片名称
26 1
|
5月前
|
JavaScript 前端开发
jQuery鼠标悬停的时候图片替换
jQuery鼠标悬停的时候图片替换
20 0