超漂亮的jQuery图片轮播特效


Posted in Javascript onNovember 24, 2015

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

超漂亮的jQuery图片轮播特效

使用方法:
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><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', 'a', function() {
         $(this).removeClass('active');
      })
       .jcarouselPagination();
   });
 });

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

Javascript 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 #Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 #Javascript
Bootstrap每天必学之按钮(一)
Nov 24 #Javascript
JavaScript DOM 学习总结(五)
Nov 24 #Javascript
jQuery解析json数据实例分析
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 #Javascript
You might like
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
javascript编程起步(第二课)
2007/01/10 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
node.js中的console用法总结
2014/12/15 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
jQuery动态添加
2016/04/07 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python random模块用法解析及简单示例
2017/12/18 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
python判断是空的实例分享
2020/07/06 Python
Python如何将装饰器定义为类
2020/07/30 Python
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
类的核心特性有哪些
2014/01/01 面试题
经典演讲稿范文
2013/12/30 职场文书
报关专员求职信范文
2014/02/22 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
个性发展自我评价2015
2015/03/09 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
小程序实现文字循环滚动动画
2021/06/14 Javascript