这是一款谷歌样式jquery水平滚动Carousel插件。该插件可以使一组元素水平排列,通过前后导航按钮进行水平滚动切换,类似旋转木马或轮播图的效果。
使用方法
在页面中引入下面的文件。
<link href="css/jquery.gScrollingCarousel.css" rel="stylesheet" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.gScrollingCarousel.js"></script>
HTML结构
<div class="g-scrolling-carousel"> <div class="items"> <a href="#">Item #1</a> <a href="#">Item #2</a> <a href="#">Item #3</a> <a href="#">Item #4</a> <a href="#">Item #5</a> <a href="#">Item #6</a> <a href="#">Item #7</a> <a href="#">Item #8</a> <a href="#">Item #9</a> <a href="#">Item #10</a> <a href="#">Item #11</a> <a href="#">Item #12</a> <a href="#">Item #13</a> <a href="#">Item #14</a> <a href="#">Item #15</a> <a href="#">Item #16</a> <a href="#">Item #17</a> </div> </div>
CSS样式
.g-scrolling-carousel .items{ padding: 5px 0; } .g-scrolling-carousel .items a{ display: inline-block; /* notice the comments between inline-block items */ margin-right: 10px; width: 300px; height: 250px; box-shadow: 0 0 5px #000; text-align: center; }
初始化插件
$(document).ready(function(){ $(".g-scrolling-carousel .items").gScrollingCarousel(); });
该谷歌样式jquery水平滚动Carousel插件的github网址为:https://github.com/morgansson/g-scrolling-carousel
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!