幻灯片/轮播
Carousel 谷歌样式水平滚动jQuery插件
PetitQ
这是一款谷歌样式 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();
});
Github 网址：https://github.com/morgansson/g-scrolling-carousel
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
