谷歌样式jquery水平滚动轮播图插件

谷歌样式jquery水平滚动轮播图插件

这是一款谷歌样式jquery水平滚动Carousel插件。该插件可以使一组元素水平排列,通过前后导航按钮进行水平滚动切换,类似旋转木马或轮播图的效果。

使用方法
在页面中引入下面的文件。

1
2
3
<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结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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样式

1
2
3
4
5
6
7
8
9
10
11
.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;
}

初始化插件

1
2
3
$(document).ready(function(){
  $(".g-scrolling-carousel .items").gScrollingCarousel();
});
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论