首页 > web前端 > js教程 > 正文

超漂亮的jQuery图片轮播特效_jquery

php中文网
发布: 2016-05-16 15:30:09
原创
1222人浏览过

超漂亮的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">&lsaquo;</a>
<a href="#" class="jcarousel-control-next">&rsaquo;</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图片轮播特效的关键代码,大家还需要进一步的完善,可以结合之前的文章进行学习,一定会有意想不到的收获。

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号