首页>>焦点图>>焦点图，带有模糊效果，网格效果的焦点图(2013-12-20)

焦点图，带有模糊效果，网格效果的焦点图

焦点图，带有模糊效果，网格效果的焦点图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="row-fluid">  
  2. <div class="pagination-centered">  
  3. <div id="myslider0" class="juicyslider">  
  4. <ul>  
  5. <li><img src="data/0.jpg" alt=""></li>  
  6. <li><img src="data/2.jpg" alt=""></li>  
  7. <li><img src="data/4.jpg" alt=""></li>  
  8. </ul>  
  9. <div class="nav next"></div>  
  10. <div class="nav prev"></div>  
  11. <div class="mask"></div>  
  12. </div>  
  13. </div>  
  14. </div>  
  15. <div class="row-fluid">  
  16. <div class="pagination-centered span4">  
  17. <div id="myslider1" class="juicyslider">  
  18. <ul>  
  19. <li><img src="data/2.jpg" alt=""></li>  
  20. <li><img src="data/3.jpg" alt=""></li>  
  21. <li><img src="data/4.jpg" alt=""></li>  
  22. </ul>  
  23. <div class="nav next"></div>  
  24. <div class="mask"></div>  
  25. </div>  
  26. </div>  
  27. <div class="pagination-centered span4">  
  28. <div id="myslider2" class="juicyslider">  
  29. <ul>  
  30. <li><img src="data/3.jpg" alt=""></li>  
  31. <li><img src="data/4.jpg" alt=""></li>  
  32. <li><img src="data/5.jpg" alt=""></li>  
  33. </ul>  
  34. <div class="nav next"></div>  
  35. <div class="nav prev"></div>  
  36. <div class="mask"></div>  
  37. </div>  
  38. </div>  
  39.   
  40. </div>  
  41.   
  42. <div>  
  43. </div>  
  44. <div> <a href="default_settings.html" class="btn btn-success">Default Settings</a> <a href="drop_effect.html" class="btn btn-warning">Drop Effect</a> <a href="puff_effect.html" class="btn btn-success">Puff Effect</a> <a href="contain_mode.html" class="btn btn-warning">Contain Mode</a> <a href="no_autoplay.html" class="btn btn-success">No Autoplay</a> </div>  
  45. </div>  
  46. <br>  
  47. <br>  
  48.   
  49.   
  50. <!-- Le javascript  
  51.         ================================================== -->   
  52. <!-- Placed at the end of the document so the pages load faster -->   
  53. <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>  
  54. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>   
  55. <script type="text/javascript" src="js/juicyslider.js"></script>   
  56. <!-- initialize Juicy Slider with a jQuery doc ready -->   
  57. <script type="text/javascript">  
  58.             // start to run when document ready  
  59.              $(function() {  
  60.                 $('#myslider0').juicyslider({  
  61.                     width: '500',  
  62.                     height: 400,  
  63.                     mask : 'none',  
  64.                     autoplay: false,  
  65.                     shuffle: true,  
  66.                 });  
  67.                  $('#myslider1').juicyslider({  
  68.                     width: '100%',  
  69.                     height: 200,  
  70.                 });  
  71.                 $('#myslider2').juicyslider({  
  72.                     width: '100%',  
  73.                     height: 200,  
  74.                     mask: 'square',  
  75.                     show: {effect: 'drop', duration: 3000},  
  76.                     hide: {effect: 'drop', duration: 3000},  
  77.                 });  
  78.                   $('#myslider3').juicyslider({  
  79.                     width: '100%',  
  80.                     height: 200,  
  81.                     mask: 'strip',  
  82.                     show: {effect: 'puff', duration: 3000},  
  83.                     hide: {effect: 'puff', duration: 3000},  
  84.                 });  
  85.             });  
  86.         </script>   

 


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