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

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

链接rel='样式表type=' text/CSS ' href=' jcarousel。基本的。CSS ' script type=' text/JavaScript ' src=' http : libs/jquery/jquery。js '/script脚本类型=' text/JavaScript ' src=' http : dist/jquery。jcarousel。量滴js '/脚本2 .超文本标记语言内容

div class=' jcarousel-wrapper ' div class=' jcarousel ' ul liimg src=' http :/_ shared/img/img 1。jpg ' width=' 600 ' height=' 400 ' alt=' '/Li Li img src=' http :/_ shared/img/img 2。jpg ' width=' 600 ' height=' 400 ' alt=' '/Li Li img src=' http :/_ shared/img/img 3。jpg ' width=' 600 ' height=' 400 ' alt=' '/Li Li img src=' http :/_ shared/img/img 4。jpg ' width=' 600 ' height=' 400 ' alt=' '/Li Li img src=' http :/_ shared/img/img 5。jpg ' width=' 600 ' height=' 400 ' alt=' '/Li Li img src=' http :/_ shared/img/img 6。jpg ' width=' 600 ' height=' 400 ' alt=' '/Li/ul/diva href=' # ' class='jcarousel-control-prev'‹/aa href=' # ' class=' jcarousel-control-next '‖/AP class=' jcarousel-pagination '/p/div 3 .函数调用

脚本类型=' text/JavaScript ' $(function(){ $(').jcarousel ').jcarousel()；$('.jcarousel-control-prev ').on(' jcarousel control : active '，function() { $(this).removeClass(“”非活动');}) .on(' jcarousel control : inactive '，function() { $(this).addClass(')非活动');}) .jcarousel控件({ target : '-=1 ' })；$('.jcarousel-control-next ').on(' jcarousel control : active '，function() { $(this).removeClass(“”非活动');}) .on(' jcarousel control : inactive '，function() { $(this).addClass(')非活动');}) .jcarousel控件({ target : '=1 ' })；$('.jcarousel-pagination ').on(' jcarousel pagination : active '，' a '，function() { $(this).添加CLaSS(' active ')；}) .on(' jcarousel pagination : inactive '，' a '，function() { $(this).移除CLaSS(' active ')；}) .jcarousel pagination()；});});以上就是为大家推荐的jQuery图片轮播特效的关键代码，大家还需要进一步的完善，可以结合之前的文章进行学习，一定会有意想不到的收获。