超漂亮的jquery图片轮播特效,使用了插件jcarousel,很棒的jquery插件,支持带缩略图左右切换,支持ajax加载数据,响应式布局,支持移动端触屏,强大的api参数配置功能以及函数回调功能,支持自定义动画速度和动画模式,支持轮播方向定义,还是很不错的,推荐学习和使用。
使用方法:
1.加载jQuery和插件
<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>@@##@@</li> <li>@@##@@</li> <li>@@##@@</li> <li>@@##@@</li> <li>@@##@@</li> <li>@@##@@</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', 'a', function() { $(this).removeClass('active'); }) .jcarouselPagination(); }); });
以上就是为大家推荐的jQuery图片轮播特效的关键代码,大家还需要进一步的完善,可以结合之前的文章进行学习,一定会有意想不到的收获。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号