仿亚马逊风格图片滚动效果
使用方法
引入文件
<link rel="stylesheet" href="css/amazon_scroller.css"> <script src="js/jquery.min.js"></script> <script src="js/amazon_scroller.js"></script>
HTML
<div id="amazon_scroller1" class="amazon_scroller"> <div class="amazon_scroller_mask"> <ul> <li><a href="" title="精通CSS"><img src="images/11.jpg" alt=""></a></li> <li><a href="" title="CSS设计彻底研究"><img src="images/12.jpg" alt=""></a></li> <li><a href="" title="锋利的jQuery"><img src="images/13.jpg" alt=""></a></li> <li><a href="" title="PHP与MySQL5程序设计"><img src="images/14.jpg" alt=""></a></li> <li><a href="" title="重构HTML"><img src="images/15.jpg" alt=""></a></li> <li><a href="" title="SEO教程"><img src="images/16.jpg" alt=""></a></li> </ul> </div> <ul class="amazon_scroller_nav"> <li></li> <li></li> </ul> </div>
如果要显示标题,标题必须写在 a 标签的 title 属性里,如上面的 HTML 代码。
JavaScript
$(function() { $("#amazon_scroller1").amazon_scroller({ scroller_title_show: 'enable', scroller_time_interval: '4000', scroller_window_padding: '20', scroller_border_size: '2', scroller_border_color: '#9c6', scroller_images_width: '110', scroller_images_height: '140', scroller_title_size: '12', scroller_title_color: 'black', scroller_show_count: '3', directory: 'images' }); });
参数
参数 | 说明 |
---|---|
scroller_time_interval | 滚动间隔,默认为 3000ms |
scroller_title_show | 是否显示标题,可选 enable(显示)和 disable(不显示),默认为 enable(显示) |
scroller_window_background_color | 背景颜色,默认为 white(白色) |
scroller_window_padding | 内边距,默认为 5px |
scroller_border_size | 边框大小,默认为 1px |
scroller_border_color | 边框颜色,默认为 black(黑色) |
scroller_images_width | 图片宽度,默认为 70px |
scroller_images_height | 图片高度,默认为 50px |
scroller_title_size | 标题字体大小,默认为 12px |
scroller_title_color | 标题字体颜色,默认为 black(黑色) |
scroller_show_count | 图片可见数量,默认为 3 |
directory | 控制按钮背景路径,默认为 images |