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

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

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

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

?使用方法

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



?HTML结构

  
    Item #1
    Item #2
    Item #3
    Item #4
    Item #5
    Item #6
    Item #7
    Item #8
    Item #9
    Item #10
    Item #11
    Item #12
    Item #13
    Item #14
    Item #15
    Item #16
    Item #17
  
?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