您的位置：首页 > Web前端 > JQuery

jQuery Mobile图片轮转轮播

2014-10-15 10:39 155 查看
最近一直很忙，刚抽出一点时间，来看了一下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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 jquery mobile 图片播放器 图片浏览器 手机图片轮播
相关文章推荐
新的分享
章节导航