jQuery Mobile圖片輪轉輪播
最近一直很忙,剛抽出一點時間,來看了一下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
相關文章
- (轉)jquery實現圖片輪播jQuery
- jQuery輪播圖之上下輪播jQuery
- 文字輪播與圖片輪播?CSS 不在話下CSS
- 圖片輪播--純cssCSS
- JQuery實現圖片輪播無縫滾動jQuery
- 造輪子之圖片輪播元件(swiper)元件
- jQuery實現3D圖片輪播詳解jQuery3D
- iOS無限輪播圖片iOS
- 圖片輪播元件實現元件
- Android 和 iOS 圖片輪播AndroidiOS
- 【iOS】自定義控制元件無限輪播 + 無限圖片輪播iOS控制元件
- 【Swift】自定義控制元件無限輪播 + 無限圖片輪播Swift控制元件
- java學習---前端---使用JavaScript和jQuery實現圖片輪播圖前端JavaScriptjQuery
- 【jquery前端開發】可調整的幻燈片(圖片輪播)薦jQuery前端
- [譯] 別再使用圖片輪播了
- 自定義圖片輪播控制元件控制元件
- Flutter輪播圖Flutter
- vue輪播圖Vue
- iOS 輪播圖iOS
- jQuery實現輪播效果jQuery
- jQuery打造淘寶展示效果和淘寶輪播圖jQuery
- Vue封裝Swiper實現圖片輪播Vue封裝
- 用原生js實現圖片輪播器JS
- 安卓之viewPager簡單用法圖片輪播安卓Viewpager
- 高效圖片輪播,兩個ImageView實現View
- Nivo Slider - 世界上最棒的 jQuery 圖片輪播外掛IDEjQuery
- js 輪播圖 (原生)JS
- jQuery 網站公告上下輪播jQuery網站
- 使用jQuery實現的平滑滾動輪播圖jQuery
- 直播app原始碼,HTML + jQuery 實現輪播圖APP原始碼HTMLjQuery
- jQuery-demos輪播圖練習(一)jQuery
- [外掛擴充套件]圖片輪播外掛套件
- Android 自定義輪播圖片控制元件Android控制元件
- VUE開發一個圖片輪播的元件Vue元件
- AndroidApp圖片輪播效果的元件化AndroidAPP元件化
- jquery Banner 圖片自動輪換顯示jQuery
- 微信小程式swiper輪播圖卡死來回瘋狂輪播微信小程式
- vue輪播圖外掛Vue