当前位置:主页 > 网页特效 > 焦点图 >

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

发布时间:2019/06/30 来源:互联网 浏览: 关键词:jquery carousel 
谷歌样式jquery水平滚动Carousel插件 谷歌样式jquery水平滚动Carousel插件
阿里云
简要教程

这是一款谷歌样式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结构
<divclass="g-scrolling-carousel">
  <divclass="items">
    <ahref="#">Item #1</a>
    <ahref="#">Item #2</a>
    <ahref="#">Item #3</a>
    <ahref="#">Item #4</a>
    <ahref="#">Item #5</a>
    <ahref="#">Item #6</a>
    <ahref="#">Item #7</a>
    <ahref="#">Item #8</a>
    <ahref="#">Item #9</a>
    <ahref="#">Item #10</a>
    <ahref="#">Item #11</a>
    <ahref="#">Item #12</a>
    <ahref="#">Item #13</a>
    <ahref="#">Item #14</a>
    <ahref="#">Item #15</a>
    <ahref="#">Item #16</a>
    <ahref="#">Item #17</a>
  </div>
</div>
 CSS样式
.g-scrolling-carousel .items{
    padding:5px0;
}
.g-scrolling-carousel .items a{
    display:inline-block;/* notice the comments between inline-block items */
    margin-right:10px;
    width:300px;
    height:250px;
    box-shadow:005px#000;
    text-align:center;
}
 初始化插件
$(document).ready(function(){
  $(".g-scrolling-carousel .items").gScrollingCarousel();
});    

 该谷歌样式jquery水平滚动Carousel插件的github网址为:https://github.com/morgansson/g-scrolling-carousel

共有人阅读,期待你的评论!评论
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top