首页>>Jquery图片>>仿亚马逊风格图片滚动效果演示(2015-06-28)

仿亚马逊风格图片滚动效果演示

仿亚马逊风格图片滚动效果演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="amazon_scroller1" class="amazon_scroller" style="border: 2px solid rgb(153, 204, 102); padding: 20px; width: 420px; height: 155px; position: relative; background-color: white;">  
  2.     <div class="amazon_scroller_mask" style="width: 360px; height: 155px;">  
  3.         <ul style="width: 720px; position: absolute; left: -720px;">  
  4.             <li style="width: 110px; display: block;"><a href="" title="精通CSS" style="color: black; font-size: 12px;"><img src="images/1.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">精通CSS</div></a></li>  
  5.             <li style="width: 110px; display: block;"><a href="" title="CSS设计彻底研究" style="color: black; font-size: 12px;"><img src="images/2.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">CSS设计彻底研究</div></a></li>  
  6.             <li style="width: 110px; display: block;"><a href="" title="锋利的jQuery" style="color: black; font-size: 12px;"><img src="images/3.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">锋利的jQuery</div></a></li>  
  7.             <li style="width: 110px; display: block;"><a href="" title="PHP与MySQL 5程序设计" style="color: black; font-size: 12px;"><img src="images/4.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">PHP与MySQL 5程序设计</div></a></li>  
  8.             <li style="width: 110px; display: block;"><a href="" title="重构HTML改善Web应用的设计" style="color: black; font-size: 12px;"><img src="images/5.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">重构HTML改善Web应用的设计</div></a></li>  
  9.             <li style="width: 110px; display: block;"><a href="" title="SEO教程:搜索引擎优化入门与进阶" style="color: black; font-size: 12px;"><img src="images/6.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">SEO教程:搜索引擎优化入门与进阶</div></a></li>  
  10.         </ul>  
  11.     <ul style="width: 720px; position: absolute; left: 0px;">  
  12.             <li style="width: 110px; display: block;"><a href="" title="精通CSS" style="color: black; font-size: 12px;"><img src="images/1.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">精通CSS</div></a></li>  
  13.             <li style="width: 110px; display: block;"><a href="" title="CSS设计彻底研究" style="color: black; font-size: 12px;"><img src="images/2.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">CSS设计彻底研究</div></a></li>  
  14.             <li style="width: 110px; display: block;"><a href="" title="锋利的jQuery" style="color: black; font-size: 12px;"><img src="images/3.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">锋利的jQuery</div></a></li>  
  15.             <li style="width: 110px; display: block;"><a href="" title="PHP与MySQL 5程序设计" style="color: black; font-size: 12px;"><img src="images/4.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">PHP与MySQL 5程序设计</div></a></li>  
  16.             <li style="width: 110px; display: block;"><a href="" title="重构HTML改善Web应用的设计" style="color: black; font-size: 12px;"><img src="images/5.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">重构HTML改善Web应用的设计</div></a></li>  
  17.             <li style="width: 110px; display: block;"><a href="" title="SEO教程:搜索引擎优化入门与进阶" style="color: black; font-size: 12px;"><img src="images/6.jpg" alt="" style="width: 110px; height: 140px;"><div class="amazon_scroller_title" style="height: 12px;">SEO教程:搜索引擎优化入门与进阶</div></a></li>  
  18.         </ul></div>  
  19.     <ul class="amazon_scroller_nav" style="top: 72.5px; width: 420px;">  
  20.         <li style="width: 25px; height: 50px; left: 0px; background-image:url(images/arrow.gif); background-repeat: no-repeat;"></li>  
  21.         <li style="width: 25px; height: 50px; right: 0px; background-image: url(images/arrow.gif); background-position: 100% 0%; background-repeat: no-repeat;"></li>  
  22.     </ul>  
  23. </div>  
JavaScript Code
  1. <script>  
  2. $(function() {  
  3.     $("#amazon_scroller1").amazon_scroller({  
  4.         scroller_title_show: 'enable',  
  5.         scroller_time_interval: '4000',  
  6.         scroller_window_padding: '20',  
  7.         scroller_border_size: '2',  
  8.         scroller_border_color: '#9c6',  
  9.         scroller_images_width: '110',  
  10.         scroller_images_height: '140',  
  11.         scroller_title_size: '12',  
  12.         scroller_title_color: 'black',  
  13.         scroller_show_count: '3',  
  14.         directory: 'images'  
  15.     });  
  16. });  
  17. </script>  

 


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