首页>>焦点图>>带圆点支持标题的焦点图/带缩略图的焦点图(2014-01-17)

带圆点支持标题的焦点图/带缩略图的焦点图

 有进度条提示时间

带圆点支持标题的焦点图/带缩略图的焦点图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="fluid_container">  
  2. <p>Pagination circles with the height relative to the width</p>  
  3. <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">  
  4. <div data-thumb="slides/thumbs/bridge.jpg" data-src="slides/bridge.jpg">  
  5. <div class="camera_caption fadeFromBottom"> Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em> </div>  
  6. </div>  
  7. <div data-thumb="slides/thumbs/leaf.jpg" data-src="slides/leaf.jpg">  
  8. <div class="camera_caption fadeFromBottom"> It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em> </div>  
  9. </div>  
  10. <div data-thumb="slides/thumbs/road.jpg" data-src="slides/road.jpg">  
  11. <div class="camera_caption fadeFromBottom"> <em>It's completely free</em> (even if a donation is appreciated) </div>  
  12. </div>  
  13. <div data-thumb="slides/thumbs/sea.jpg" data-src="slides/sea.jpg">  
  14. <div class="camera_caption fadeFromBottom"> Camera slideshow provides many options <em>to customize your project</em> as more as possible </div>  
  15. </div>  
  16. <div data-thumb="slides/thumbs/shelter.jpg" data-src="slides/shelter.jpg">  
  17. <div class="camera_caption fadeFromBottom"> It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>) </div>  
  18. </div>  
  19. <div data-thumb="slides/thumbs/tree.jpg" data-src="slides/tree.jpg">  
  20. <div class="camera_caption fadeFromBottom"> Different color skins and layouts available, <em>fullscreen ready too</em> </div>  
  21. </div>  
  22. </div>  
  23. <!-- #camera_wrap_1 -->  
  24.   
  25. <p>Thumbnails with fixed height</p>  
  26. <div class="camera_wrap camera_magenta_skin" id="camera_wrap_2">  
  27. <div data-thumb="slides/thumbs/bridge.jpg" data-src="slides/bridge.jpg">  
  28. <div class="camera_caption fadeFromBottom"> Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em> </div>  
  29. </div>  
  30. <div data-thumb="slides/thumbs/leaf.jpg" data-src="slides/leaf.jpg">  
  31. <div class="camera_caption fadeFromBottom"> It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em> </div>  
  32. </div>  
  33. <div data-thumb="slides/thumbs/road.jpg" data-src="slides/road.jpg">  
  34. <div class="camera_caption fadeFromBottom"> <em>It's completely free</em> (even if a donation is appreciated) </div>  
  35. </div>  
  36. <div data-thumb="slides/thumbs/sea.jpg" data-src="slides/sea.jpg">  
  37. <div class="camera_caption fadeFromBottom"> Camera slideshow provides many options <em>to customize your project</em> as more as possible </div>  
  38. </div>  
  39. <div data-thumb="slides/thumbs/shelter.jpg" data-src="slides/shelter.jpg">  
  40. <div class="camera_caption fadeFromBottom"> It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>) </div>  
  41. </div>  
  42. <div data-thumb="slides/thumbs/tree.jpg" data-src="slides/tree.jpg">  
  43. <div class="camera_caption fadeFromBottom"> Different color skins and layouts available, <em>fullscreen ready too</em> </div>  
  44. </div>  
  45. </div>  
  46. <!-- #camera_wrap_2 -->   
  47. </div>  
  48. <!-- .fluid_container -->  
  49.   
  50. </div>  
XML/HTML Code
  1. <script>  
  2.         jQuery(function(){  
  3.               
  4.             jQuery('#camera_wrap_1').camera({  
  5.                 thumbnails: true  
  6.             });  
  7.   
  8.             jQuery('#camera_wrap_2').camera({  
  9.                 height: '400px',  
  10.                 loader: 'bar',  
  11.                 pagination: false,  
  12.                 thumbnails: true  
  13.             });  
  14.         });  
  15.     </script>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_235.html