超级漂亮的jQuery焦点图广告轮播特效

合集下载

通过jQuery实现轮播效果

通过jQuery实现轮播效果HTML<div class="wrap"><div id="slide"><ul class="list"><li><a href="#"><img src="Style/Images/1.png" alt=""></a></li><li><a href="#"><img src="Style/Images/2.png" alt=""></a></li><li><a href="#"><img src="Style/Images/3.png" alt=""></a></li><li><a href="#"><img src="Style/Images/4.png" alt=""></a></li><li><a href="#"><img src="Style/Images/5.png" alt=""></a></li></ul></div></div>js（需要引⼊jQuery库）<script src="js/jquery-1.9.1.min.js"></script><script src="js/Mds.onePic.1.0.js" type="text/javascript"></script><script>$('#slide').MdsSlideFade({pageNum: true, time: '3000'});</script>Mds.onePic.1.0.js;(function($,window,document,undefined){var Inits = function(ele,opts){this.$ele = ele,this.defaults = {_width: 600, //设置图轮播图⼤⼩_height: 400,page: 'page', //是否启⽤导航图标,有值时启⽤，值为导航图标列表的样式类，为空时不启⽤导航列表btn: true, //是否启⽤上下⼀页按钮，true为启⽤,false或者空为不启⽤。

jQuery带进度条全屏图片轮播特效代码分享

jQuery带进度条全屏图⽚轮播特效代码分享本⽂实例讲述了jQuery带进度条全屏图⽚轮播特效。

分享给⼤家供⼤家参考。

具体如下：jQuery实现的带进度条转接全屏图⽚轮播效果是⼀款基于jQuery实现的oppo⼿机官⽹⾸页带进度条全屏图⽚轮播特效代码,实现效果⼤⽓，简洁⼤⽅运⾏效果图： ------------------- -------------------⼩提⽰：浏览器中如果不能正常运⾏，可以尝试切换浏览模式。

（1）在head区域引⼊CSS样式：link rel="stylesheet" type="text/css" href="css/style.css">（2）js代码：<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">var i=0;jummper();function jummper(){$(".pic ul li").eq(i).find("img").css("left","-1180px");$(".pic ul li").eq(i).find("p").css("width","0px");$(".pic ul li").eq(i).find("img").animate({left:"0px"},500,function(){//当图⽚移动完成后再加载进度条//alert("当图⽚移动完成后再做操作");$(".pic ul li").eq(i).find("p").animate({width:"1174px"},8000,function(){$(".pic ul li").eq(i).find("img").animate({left:"1180px"},500,function(){i++;if(i>2)i=0;$(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);});});});}setInterval("jummper()",9100);</script>为⼤家分享的jQuery带进度条全屏图⽚轮播特效代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery带进度条全屏图⽚轮播代码</title><link rel="stylesheet" type="text/css" href="css/style.css"></head><body><div class="pic"><ul><li style="background:url(images/bg1.jpg) center;"><img src="images/con1.png"><div class="nav"></div><div class="bar"><p></p></div></li><li style="background:url(images/bg2.jpg) center;"><img src="images/con2.png"><div class="nav"></div><div class="bar"><p></p></div></li><li style="background:url(images/bg3.jpg) center;"><img src="images/con3.png"><div class="nav"></div><div class="bar"><p></p></div></li></ul></div><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">var i=0;jummper();function jummper(){$(".pic ul li").eq(i).find("img").css("left","-1180px");$(".pic ul li").eq(i).find("p").css("width","0px");$(".pic ul li").eq(i).find("img").animate({left:"0px"},500,function(){//当图⽚移动完成后再加载进度条//alert("当图⽚移动完成后再做操作");$(".pic ul li").eq(i).find("p").animate({width:"1174px"},8000,function(){$(".pic ul li").eq(i).find("img").animate({left:"1180px"},500,function(){i++;if(i>2)i=0;$(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);});});});}setInterval("jummper()",9100);</script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>适⽤浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p></div></body></html>以上就是为⼤家分享的jQuery带进度条全屏图⽚轮播特效代码，希望⼤家可以喜欢，并应⽤到实践中。

jQuery插件jSlider图片轮播

jQuery插件jSlider图⽚轮播jSlider是⼀个⾮常好的图⽚轮播插件。

有导航箭头，可以⾃动播放，可以循环播放。

官⽅⽹站 https:///copthuy/jSlider<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><title>jSlider</title><meta name="description" content="jSlider JS example"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" href="jSlider.min.css"></head><body><div class="jSlider" id="slider-example"><div><img src="images/photo1.png"></div><div><img src="images/photo2.png"></div><div><img src="images/photo3.png"></div><div><img src="images/photo4.png"></div><div><img src="images/photo5.png"></div><div><img src="images/photo6.png"></div></div><script src="https:///ajax/jquery/jquery-3.3.1.min.js"></script><script src="jquery.jSlider.min.js"></script><script>$('#slider-example').sliderInit({'navigation': 'hover','indicator': 'always','speed': 500, //速度'delay': 5000, //延迟'transition': 'slide','loop': true,'group': 1});</script></body></html>。

jquery实现图片自动轮播效果

jquery实现图⽚⾃动轮播效果本⽂实例为⼤家分享了jquery实现图⽚⾃动轮播效果的具体代码，供⼤家参考，具体内容如下HTML代码如下：<div id="container"><img src="icon1.jpg" class="left"><img src="icon2.jpg" class="right"><div id="scroll"><div id="scroll_pic"><ul class="count"><li><img src="1.jpg" title="1.jpg"><span>1</span></li><li><img src="2.jpg" title="2.jpg"><span>2</span></li><li><img src="3.jpg" title="3.jpg"><span>3</span></li><li><img src="4.png" title="4.png"><span>4</span></li><li><img src="3.jpg" title="3.jpg"><span>5</span></li></ul><ul><li><img src="1.jpg" title="1.jpg"><span>11</span></li><li><img src="2.jpg" title="2.jpg"><span>22</span></li><li><img src="3.jpg" title="3.jpg"><span>33</span></li><li><img src="4.png" title="4.png"><span>44</span></li><li><img src="3.jpg" title="3.jpg"><span>55</span></li></ul></div></div></div>以上是这个图⽚轮播效果的css的布局样式及html代码部分（相信⼤家很容易实现！就不赘述了……），下⾯⼀起来看⽤jquery如何实现此效果吧！jquery来实现图⽚⾃动⽆缝轮播的效果，步骤及代码如下：步骤⼀：引⼊jquery⽂件，代码如下：<script type="text/javascript" src="jquery-1.7.min.js"></script>步骤⼆：创建两个函数，分别控制图⽚向左右移动 - - moveRight() 和 moveLeft()，代码如下：//右移函数function moveRight(){var left=$('#scroll_pic').position().left; //获取元素相对于左端的偏移量$('#scroll_pic').animate({"left":"+="+oLiWidth+"px"},800) //函数每被调⽤⼀次匹配元素发⽣⽔平偏移}//左移函数function moveLeft(){var left=$('#scroll_pic').position().left;$('#scroll_pic').animate({"left":"-="+oLiWidth+"px"},800);}步骤三：完成对应事件的绑定，实现基本的⼿动播放效果，代码如下：//事件绑定$('.left').on('click',moveRight);$('.right').on('click',moveLeft);步骤四：实现⼿动轮播效果，即：分别为上述两个偏移函数【moveRight() 和 moveLeft()】添加条件判断。

jQuery动画效果图片轮播特效

jQuery动画效果图⽚轮播特效从这⼀章节开始，我将会为⼤家陆续的介绍利⽤Jquery完成特效动画。

先来看看这⼀节所介绍的特效：传统轮播。

⼀、需求分析1. 提供很多尺⼨相等的图⽚，⼀排紧挨着显⽰。

2. 左右有两个切换按钮，⽤来控制显⽰上⼀张还是下⼀张。

3. 右下⽅有指⽰器"⼩圈圈"，⽤来提⽰显⽰到第⼏个图⽚；也可以点击它，进⾏图⽚的切换。

4. 每隔⼀个固定的时间，图⽚会⾃动滚动。

5. 当⿏标放到图⽚上⾯的时候，会停⽌⾃动滚动；当⿏标离开后，再经过固定间隔时间后，⼜会⾃动播放。

⼆、代码剖析1. ⽤html代码搭建框架<body><div id="container"><ul id="content"><li><a href="#"><img src="images/0.jpg"/></a></li><li><a href="#"><img src="images/1.jpg"/></a></li><li><a href="#"><img src="images/2.jpg"/></a></li><li><a href="#"><img src="images/3.jpg"/></a></li><li><a href="#"><img src="images/4.jpg"/></a></li></ul><div id="btn"><div id="leftBtn"></div><div id="rightBtn"></div></div><ul id="indicator"><li class="current"></li><li></li><li></li><li></li><li></li></ul></div></body>1> id为container的div，是整个轮播效果的容器。

基于JQuery的实现图片轮播效果(焦点图)

基于JQuery的实现图片轮播效果(焦点图)
【原理简述】这里大概说一下整个流程： 1，将除了第一张以外的图片全部隐藏， 2，获取第一张图片的alt信息显示在信息栏，并添加点击事件 3，为4个按钮添加点击侦听，点击相应的按钮，用fadeOut，fadeIn方法显示图片 4，设置setInterval，定时执行切换函数【代码说明】 filter(":visible") :获取所有可见的元素 unbind()：从匹配的元素中删除绑定的事件 siblings：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合例：找到每个div 的所有同辈元素中带有类名为selected的元素。复制代码代码如下:
复制代码代"text/css"> #banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;} #banner_list img {border:0px;} #banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;zindex:1000;cursor:pointer; width:478px; } #banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer} #banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;} #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002; margin:0; padding:0; bottom:3px; right:5px;} #banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background-color:#6f4f67;cursor:pointer} #banner_list a{position:absolute;}  </style> JS部分:

jQuery轮播图功能实现方法

jQuery轮播图功能实现⽅法本⽂实例为⼤家分享了jQuery轮播图功能的实现代码，供⼤家参考，具体内容如下jQuery轮播（⽆animation）html布局<div class="container"><ul class="items" style="left:-200px"><li>5</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>1</li></ul><span class="left"><</span><span class="right">></span><ul class="points"><li class="current"></li><li></li><li></li><li></li><li></li></ul></div>CSS<style>/* 轮播区域 */.container {width: 200px;height: 100px;margin: 100px auto;overflow: hidden;position: relative;}ul {position: absolute;list-style-type: none;width: 1400px;padding: 0;margin: 0;}/* 轮播图⽚ */.items li {width: 200px;height: 100px;margin: 0;padding: 0;float: left;background-color: pink;text-align: center;}/* 左右翻页span */span {display: block;width: 20px;height: 30px;background-color: rgba(70, 130, 180, 0.3);position: absolute;top: 50%;transform: translateY(-50%);line-height: 30px;}span:hover {cursor: pointer;}.left {left: 0;}.right {right: 0;}/* 圆点 */.points {width: 45px;margin: 0;padding: 0;bottom: 3px;left: 50%;transform: translateX(-50%);}.points li {float: left;width: 7px;height: 7px;border-radius: 50%;margin: 1px;background-color: rgba(0, 0, 0, 0.5);}.points li:hover {background-color: rgba(255, 250, 205, 1);}.points .current {background-color: rgba(255, 250, 205, 1);}</style>jQuery<script type="text/javascript">// 1. 点击按钮左右切换页⾯------轮播+动画，⿏标进⼊，播放暂停，⿏标移出，播放继续 // 2. 页⾯每隔3秒⾃动切换// 3. 圆点跟着⼀起切换样式// 左切换let $left = $('.left')// 右切换let $right = $('.right')// 图⽚lilet $list = $('.items')let $items = $list.children()// ⼤容器let $container = $('.container')// 圆点let $points = $('.points').children()const length = $points.length// 设置的总偏移量=li.widthconst itemWidth = 200// 设置每次动画时间msconst time = 50// 移动次数const n = 20// list最⼤偏移量-(length+1)*li.widthconst long = -(length + 1) * itemWidth// 规定是否在翻页，默认没有在翻页------>解决翻页时点击翻页，出现位置偏差 let moveFlag = false// 定时器移动的时间const TIME = 3000// 向左切换$left.click(function() {changeItem(true)})// 向右切换$right.click(function() {changeItem(false)})// ⾃动切换let timer = setInterval(function() {changeItem(false)}, TIME)// ⿏标进⼊，播放暂停，⿏标移出，播放继续$container.hover(function() {clearInterval(timer)}, function() {timer = setInterval(function() {changeItem(false)}, TIME)})//点击圆点翻页$points.click(function() {//获取当前点击元素的indexlet index = $(this).index()// 跳转到对应的index图changeItem(index)// 圆点其他兄弟样式取消$points.eq(index).addClass('current').siblings().removeClass('current')})// 左右切换函数封装function changeItem(flag) {// 如果当前在翻页，直接返回if (moveFlag) {return}// 如果当前没在翻页，执⾏代码，且将moveFlag改为true，标识正在翻页moveFlag = true// offset是偏移量let offset = 0;//let currentLeft = parseInt($list.position().left)// 如果传⼊的是boolean型，表⽰是左右平滑翻页// 如果是数字型，就表⽰是点击圆点翻页if (typeof flag == 'boolean') {// 判断是左翻还是右翻，设置相应的位移offset = flag ? itemWidth : -itemWidth} else {// 点击圆点翻页// -(flag + 1)*itemWidth是⽬标位移，currentLeft是当前距离offset = -(flag + 1) * itemWidth - currentLeft}// ⽤来累计执⾏的次数let i = 0/*动画效果切换：按照次数来计算总距离=总偏移量=offset每次时间设置time*/// 每次移动的距离 itemOffsetlet itemOffset = offset / n// 获取现在的left// 定时器函数const timer = setInterval(function() {// 每执⾏⼀次就加⼀，直到i===n，表⽰次数⾜够就停⽌定时器i++currentLeft += itemOffset// 设置left值// 必须先设置值，再去判断$list.css('left', currentLeft)if (i === n) {// 位移⾜够，清除定时器clearInterval(timer)// 翻页结束moveFlag = false// 圆点随之改变$points.eq(Math.abs(currentLeft / itemWidth) - 1).addClass('current').siblings().removeClass('current') // 当定位到最后⼀张时，换到第⼆张去，视觉是轮播if (currentLeft == long) {$list.css('left', -itemWidth)// 圆点设置到实际的第⼀张图上$points.eq(0).addClass('current').siblings().removeClass('current')// 如果已经到达最后⼀张图的垫底图，就返回实际意义上的第⼀张图} else if (currentLeft == 0) {$list.css('left', -length * itemWidth)// 圆点设置到实际的最后⼀张图上$points.eq(length - 1).addClass('current').siblings().removeClass('current')}}}, time)}</script>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

Jquery代码实现图片轮播效果（一）

Jquery代码实现图⽚轮播效果（⼀）⽂章写的不好，还请各位⾼⼿指教，不废话了，先上张效果图吧看下：⾸先是初始化部分：将除了第⼀张轮播图⽚意外的图⽚都隐藏，并且隐藏向前、向后按钮，使第⼀个索引按钮处于激活状态。

事件部分：通过jquery的hover()绑定⿏标上悬以及离开时的事件处理， jquery的bind()⽅法绑定⿏标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始⾃动轮播，stop()停⽌⾃动轮播。

下篇是⼀个纯粹的jquery轮播插件，该插件可以定制各种效果，⽅便的配置以及可扩展。

下⾯是整体的代码：index.html[html] view plaincopy<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jquery轮播效果图 </title><script type="text/javascript" src="scripts/jquery-1.9.1.js"></script><style type="text/css">* {padding: 0px;margin: 0px;}a {text-decoration: none;}ul {list-style: outside none none;}.slider, .slider-panel img, .slider-extra {width: 650px;height: 413px;}.slider {text-align: center;margin: 30px auto;position: relative;}.slider-panel, .slider-nav, .slider-pre, .slider-next {position: absolute;z-index: 8;}.slider-panel {position: absolute;}.slider-panel img {border: none;}.slider-extra {position: relative;}.slider-nav {margin-left: -51px;position: absolute;left: 50%;bottom: 4px;}.slider-nav li {background: #3e3e3e;border-radius: 50%;color: #fff;cursor: pointer;margin: 0 2px;overflow: hidden;text-align: center;display: inline-block;height: 18px;line-height: 18px;width: 18px;}.slider-nav .slider-item-selected {background: blue;}.slider-page a{background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff;text-align: center;display: block;font-family: "simsun";font-size: 22px;width: 28px;height: 62px;line-height: 62px;margin-top: -31px;position: absolute;top: 50%;}.slider-page a:HOVER {background: rgba(0, 0, 0, 0.4);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); }.slider-next {left: 100%;margin-left: -28px;}</style><script type="text/javascript">$(document).ready(function() {var length,currentIndex = 0,interval,hasStarted = false, //是否已经开始轮播t = 3000; //轮播时间间隔length = $('.slider-panel').length;//将除了第⼀张图⽚隐藏$('.slider-panel:not(:first)').hide();//将第⼀个slider-item设为激活状态$('.slider-item:first').addClass('slider-item-selected');//隐藏向前、向后翻按钮$('.slider-page').hide();//⿏标上悬时显⽰向前、向后翻按钮,停⽌滑动，⿏标离开时隐藏向前、向后翻按钮，开始滑动$('.slider-panel, .slider-pre, .slider-next').hover(function() {stop();$('.slider-page').show();}, function() {$('.slider-page').hide();start();});$('.slider-item').hover(function(e) {stop();var preIndex = $(".slider-item").filter(".slider-item-selected").index();currentIndex = $(this).index();play(preIndex, currentIndex);}, function() {start();});$('.slider-pre').unbind('click');$('.slider-pre').bind('click', function() {pre();});$('.slider-next').unbind('click');$('.slider-next').bind('click', function() {next();});/*** 向前翻页*/function pre() {var preIndex = currentIndex;currentIndex = (--currentIndex + length) % length;play(preIndex, currentIndex);}/*** 向后翻页*/function next() {var preIndex = currentIndex;currentIndex = ++currentIndex % length;play(preIndex, currentIndex);}/*** 从preIndex页翻到currentIndex页* preIndex 整数，翻页的起始页* currentIndex 整数，翻到的那页*/function play(preIndex, currentIndex) {$('.slider-panel').eq(preIndex).fadeOut(500).parent().children().eq(currentIndex).fadeIn(1000);$('.slider-item').removeClass('slider-item-selected');$('.slider-item').eq(currentIndex).addClass('slider-item-selected');}/*** 开始轮播*/function start() {if(!hasStarted) {hasStarted = true;interval = setInterval(next, t);}}/*** 停⽌轮播*/function stop() {clearInterval(interval);hasStarted = false;}//开始轮播start();});</script></head><body><div class="slider"><ul class="slider-main"><li class="slider-panel"><a href="https://" target="_blank"><img alt="关注" title="关注" src="images/1.jpg"></a> </li><li class="slider-panel"><a href="https://" target="_blank"><img alt="关注" title="关注" src="images/2.jpg"></a> </li><li class="slider-panel"><a href="https://" target="_blank"><img alt="关注" title="关注" src="images/3.jpg"></a> </li><li class="slider-panel"><a href="https://" target="_blank"><img alt="关注" title="关注" src="images/4.jpg"></a> </li></ul><div class="slider-extra"><ul class="slider-nav"><li class="slider-item">1</li><li class="slider-item">2</li><li class="slider-item">3</li><li class="slider-item">4</li></ul><div class="slider-page"><a class="slider-pre" href="javascript:;;"><</a><a class="slider-next" href="javascript:;;">></a></div></div></div></body></html>⾄此⼀个简单的jquery轮播效果就完成了，当然还有很多需要改进的地⽅。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

超级漂亮的jQuery 焦点图广告轮播特效插件jCarousel
来源：原创作者:JS 代码网时间:2014-04-15 访问: 下载次数：
超级漂亮的jQuery 焦点图广告轮播特效插件jCarousel ，很棒的jQuery 插件，支持带缩略图左右切换，
支持Ajax 加载数据，响应式布局，支持移动端触屏，强大的API 参数配置功能以及函数回调功能，支
持自定义动画速度和动画模式，支持轮播方向定义，还是很不错的，推荐学习和使用。

使用方法：
1.加载jQuery 和插件
1 <link rel="stylesheet" type="text/css" href="jcarousel.basic.css">
2 <script type="text/javascript" src="libs/jquery/jquery.js"></script>
3 <script type="text/javascript" src="dist/jquery.jcarousel.min.js"></script>
2.HTML 内容
01 <div class ="jcarousel-wrapper">
02 <div class ="jcarousel">
03 <ul >
04 <li ><img src ="../_shared/img/img1.jpg" width ="600" height ="400" alt =""></li >
05 <li ><img src ="../_shared/img/img2.jpg" width ="600" height ="400" alt =""></li >
06 <li ><img src ="../_shared/img/img3.jpg" width ="600" height ="400" alt =""></li >
07 <li ><img src ="../_shared/img/img4.jpg" width ="600" height ="400" alt =""></li >
08 <li ><img src ="../_shared/img/img5.jpg" width ="600" height ="400" alt =""></li >
09 <li ><img src ="../_shared/img/img6.jpg" width ="600" height ="400" alt =""></li >
10 </ul >
11 </div >
12 <a href ="#" class ="jcarousel-control-prev">&lsaquo;</a >
13 <a href ="#" class ="jcarousel-control-next">&rsaquo;</a >
14 <p class ="jcarousel-pagination">
15 </p >
16 </div >
3.函数调用
view source
print?
01 <script type="text/javascript">
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 });。