超级漂亮的jQuery焦点图广告轮播特效
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
超级漂亮的jQuery 焦点图广告轮播特效插件jCarousel
来源:原创 作者:JS 代码网 时间:2014-04-15 访问: 下载次数:
超级漂亮的jQuery 焦点图广告轮播特效插件jCarousel ,很棒的jQuery 插件,支持带缩略图左右切换,
支持Ajax 加载数据,响应式布局,支持移动端触屏,强大的API 参数配置功能以及函数回调功能,支
持自定义动画速度和动画模式,支持轮播方向定义,还是很不错的,推荐学习和使用。
使用方法:
1.加载jQuery 和插件
1
2
3
2.HTML 内容
01
3.函数调用
view source
print?
01
02 $(function(){
03 $('.jcarousel').jcarousel();
04
05 $('.jcarousel-control-prev')
06 .on('jcarouselcontrol:active', function() {
07 $(this).removeClass('inactive');
08 })
09 .on('jcarouselcontrol:inactive', function() {
10 $(this).addClass('inactive');
11 })
12 .jcarouselControl({
13 target: '-=1'
14 });
15
16 $('.jcarousel-control-next')
17 .on('jcarouselcontrol:active', function() {
18 $(this).removeClass('inactive');
19 })
20 .on('jcarouselcontrol:inactive', function() {
21 $(this ).addClass('inactive');
22 })
23 .jcarouselControl({
24 target: '+=1'
25 });
26
27 $('.jcarousel-pagination')
28 .on('jcarouselpagination:active', 'a', function () {
29 $(this ).addClass('active');
30 })
31 .on('jcarouselpagination:inactive', 'a', function () {
32 $(this ).removeClass('active');
33 })
34 .jcarouselPagination();
35 });
36
37
38 });