幻灯片/轮播

Carousel 谷歌样式水平滚动jQuery插件

面包多

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

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. <link href="css/jquery.gScrollingCarousel.css" rel="stylesheet" />
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script src="js/jquery.gScrollingCarousel.js"></script>

HTML 结构

  1. <div class="g-scrolling-carousel">
  2.   <div class="items">
  3.     <a href="#">Item #1</a>
  4.     <a href="#">Item #2</a>
  5.     <a href="#">Item #3</a>
  6.     <a href="#">Item #4</a>
  7.     <a href="#">Item #5</a>
  8.     <a href="#">Item #6</a>
  9.     <a href="#">Item #7</a>
  10.     <a href="#">Item #8</a>
  11.     <a href="#">Item #9</a>
  12.     <a href="#">Item #10</a>
  13.     <a href="#">Item #11</a>
  14.     <a href="#">Item #12</a>
  15.     <a href="#">Item #13</a>
  16.     <a href="#">Item #14</a>
  17.     <a href="#">Item #15</a>
  18.     <a href="#">Item #16</a>
  19.     <a href="#">Item #17</a>
  20.   </div>
  21. </div>

CSS 样式

  1. .g-scrolling-carousel .items{
  2.     padding: 5px 0;
  3. }
  4. .g-scrolling-carousel .items a{
  5.     display: inline-block; /* notice the comments between inline-block items */
  6.     margin-right: 10px;
  7.     width: 300px;
  8.     height: 250px;
  9.     box-shadow: 0 0 5px #000;
  10.     text-align: center;
  11. }

初始化插件

  1. $(document).ready(function(){
  2.   $(".g-scrolling-carousel .items").gScrollingCarousel();
  3. });

Github 网址:https://github.com/morgansson/g-scrolling-carousel

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!