超漂亮的jQuery图片轮播特效
发布时间:2020-12-14 22:31:45 所属栏目:资源 来源:网络整理
导读:超漂亮的jQuery图片轮播特效,使用了插件jCarousel,很棒的jQuery插件,支持带缩略图左右切换,支持Ajax加载数据,响应式布局,支持移动端触屏,强大的API参数配置功能以及函数回调功能,支持自定义动画速度和动画模式,支持轮播方向定义,还是很不错的,推
超漂亮的jQuery图片轮播特效,使用了插件jCarousel,很棒的jQuery插件,支持带缩略图左右切换,支持Ajax加载数据,响应式布局,支持移动端触屏,强大的API参数配置功能以及函数回调功能,支持自定义动画速度和动画模式,支持轮播方向定义,还是很不错的,推荐学习和使用。 使用方法: <link rel="stylesheet" type="text/css" href="jcarousel.basic.css"> <script type="text/javascript" src="libs/jquery/jquery.js"></script> <script type="text/javascript" src="dist/jquery.jcarousel.min.js"></script> 2.HTML内容 <div class="jcarousel-wrapper"> <div class="jcarousel"> <ul> <li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li> <li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li> <li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li> <li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li> <li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li> <li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li> </ul> </div> <a href="#" class="jcarousel-control-prev">‹</a> <a href="#" class="jcarousel-control-next">›</a> <p class="jcarousel-pagination"> </p> </div> 3.函数调用 <script type="text/javascript"> $(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',function() { $(this).removeClass('active'); }) .jcarouselPagination(); }); }); 以上就是为大家推荐的jQuery图片轮播特效的关键代码,大家还需要进一步的完善,可以结合之前的文章进行学习,一定会有意想不到的收获。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |