当前位置:  首页  >  PHP资讯  >  业界资讯

超漂亮的jQuery图片轮播特效

这篇文章为大家分享了超漂亮的jQuery图片轮播特效,支持Ajax加载数据,响应式布局,支持移动端触屏,功能强大,感兴趣的小伙伴们可以参考一下

超漂亮的jQuery图片轮播特效,使用了插件jCarousel,很棒的jQuery插件,支持带缩略图左右切换,支持Ajax加载数据,响应式布局,支持移动端触屏,强大的API参数配置功能以及函数回调功能,支持自定义动画速度和动画模式,支持轮播方向定义,还是很不错的,推荐学习和使用。

使用方法:
1.加载jQuery和插件

    

2.HTML内容

3.函数调用

  $(function(){ $('.jcarousel').jcarousel(); $('.jcarousel-control-prev') .on('jcarouselcontrol:active', function() { $(this).removeClass('inactive'); }) .on('jcarouselcontrol:inactive', function() { $(this).addClass('inactive'); }) .jcarouselControl({ target: '-=1' }); $('.jcarousel-control-next') .on('jcarouselcontrol:active', function() { $(this).removeClass('inactive'); }) .on('jcarouselcontrol:inactive', function() { $(this).addClass('inactive'); }) .jcarouselControl({ target: '+=1' }); $('.jcarousel-pagination') .on('jcarouselpagination:active', 'a', function() { $(this).addClass('active'); }) .on('jcarouselpagination:inactive', 'a', function() { $(this).removeClass('active'); }) .jcarouselPagination(); }); }); 

以上就是为大家推荐的jQuery图片轮播特效的关键代码,大家还需要进一步的完善,可以结合之前的文章进行学习,一定会有意想不到的收获。

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4