jquery轮播实例教程
分类:pc28.am

小说写的不得了,还请各位高手指教,不赘述了,先上张效果图吧看下:

就那样个意思,没截动图哈~

jQuery达成宽屏图片轮播实例教程,jquery轮播实例教程

本文实例陈诉了jQuery完毕宽屏图片轮播实例教程。分享给大家供大家参照他事他说加以考察。具体如下:
运维作效果果截图如下:

图片 1

引入jquery库

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

构建html
成套代码分为三有些:

1、加载部分loadding ;

2、图片部分,这里图片只可以是4张,有心的心上人再改良下呢;

3、TAB按键部分,当然这里也只好是4个按键,也急需改进。

<div class="gg" id="gg">
      <div class="ggLoading">
        <div class="ggLoading2"><em>精彩活动载入中</em></div>
      </div>
      <div class="ggs">
        <div class="ggBox" id="ggBox">
          <a href="#" title="5月22日测试开启领报名资格" style="z-index: 3; opacity: 4;">
            <img src="images/1.jpg" alt="图片 2" /></a>
          <a href="#" title="首测世界的雕琢篇章开启">
            <img src="images/2.jpg" alt="图片 3" /></a>
          <a href="#" title="上古世纪游戏资料手册">
            <img src="images/3.jpg" alt="图片 4" /></a>
          <a href="#" title="游戏四大特色揭晓">
            <img src="images/4.jpg" alt="图片 5" /></a>
        </div>
      </div>
      <div class="ggb">
        <div class="ggBtns" id="ggBtns">
          <a title="5月22日测试开启领报名资格" href='javascript:void(0)' class="ggOn"><em>5月22日测试开启领报名资格</em></a>
          <a title="首测世界的雕琢篇章开启" href='javascript:void(0)'><em>首测世界的雕琢篇章开启</em></a>
          <a title="上古世纪游戏资料手册" href='javascript:void(0)'><em>上古世纪游戏资料手册</em></a>
          <a title="游戏四大特色揭晓" href='javascript:void(0)'><em>游戏四大特色揭晓</em></a>
        </div>
      </div>
    </div>

CSS样式
这里的CSS能够依照项目须求自定义,不必拘泥于上边的代码,只要弄懂个中的法规就OK了。若你看不懂上面包车型地铁CSS的话就恶补下吧,在那就不风度翩翩风流浪漫疏解了。

.ggLoading, .ggLoading2 {
  background-image: url(../images/nav.png);
}
.gg {
  width: 100%;
  height: 500px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0 auto;
  background: #d3d3d3 url(../images/loading.jpg) repeat-x;
}
.ggLoading {
  position: absolute;
  left: 40%;
  top: 200px;
  width: 325px;
  text-align: center;
  height: 56px;
  background-position: 0 -274px;
  background-repeat: no-repeat;
  line-height: 56px;
  color: #9c9c9c;
}
.ggLoading2 {
  width: 330px;
  height: 56px;
  background-position: 213px -330px;
  background-repeat: no-repeat;
}
.ggLoading em {
  font-weight: bold;
}
.ggs {
  width: 200%;
  height: 500px;
  left: -50%;
  top: 0;
  position: absolute;
}
.ggBox {
  width: 1920px;
  height: 500px;
  margin: 0 auto;
}
.ggBox a {
  display: block;
  width: 1920px;
  height: 500px;
  position: absolute;
  z-index: 1;
  opacity: 0.1;
}
.ggBox img {
  display: block;
  width: 1920px;
  height: 500px;
}
.ggb {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 40px;
  z-index: 4;
  background-color: #32342e;
  background-repeat: repeat-x;
  background-position: 50% -40px;
}
.ggBtns {
  width: 960px;
  height: 40px;
  margin: 0 auto;
  border-left: 1px solid #090908;
  border-right: 1px solid #6a6a60;
}
.ggBtns a {
  float: left;
  display: block;
  width: 240px;
  height: 40px;
  text-align: center;
  padding-top: 10px;
  color: #848380;
  font-size: 14px;
  line-height: 40px;
  background-position: 0 10px;
  position: relative;
  top: -10px;
  outline: none;
  background-repeat: no-repeat;
  cursor: pointer;
}
.ggBtns a em {
  display: block;
  width: 210px;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
}
.ggBtns a:hover {
  color: #e7e7e7;
}
.ggBtns a:focus {
  outline: none;
}
.ggBtns a.ggOn {
  color: #e7e7e7;
  background-position: 0 0;
}
.ggb, .ggBtns a {
  background-image: url(../images/main.jpg);
}
a.ggOn {
  background-image: url(../images/gg.png);
}

JS代码
归根结底驾临重大多数了,那部分的代码十分的少,一同来看下吧。

$(function () {//文档加载后执行

  //定义$con,$box,$btns,$i变量,autoChange自动播放函数,loop定时器。 
  var $con = $('#gg'), $box = $con.find('#ggBox'), $btns = $con.find('#ggBtns'), i = 0, autoChange = function () {
    i  = 1;//计数器 1
    if (i === 4) { i = 0; }//如果计数器i等4就把i重置为0.

    $btns.find('a:eq('   i   ')').addClass('ggOn').siblings().removeClass('ggOn');
    //找到TAB按钮中的第i个a标签,为其加上ggOn的样式,同时移除所有同级的a标签ggOn样式
    var curr = $box.find('a:eq('   i   ')'), prev = curr.siblings();
    //定义curr变量,并赋值为$box中当前显示图片的a标签,定义prev变量,赋值为$box中除了当前显示图片的A标签外的所有A标签。
    prev.css('z-index', 2);//$box中除了当前显示图片的A标签外的所有A标签的index值变为2,即向下移一层
    curr.css('z-index', 3).animate({ //$box中当前显示图片的a标签index值变为3,即向上移一层,然后使用jquery动画以150毫秒把透明度变为1,之后执行匿名函数function。
      'opacity': 1
    }, 150, function () { //$box中除了当前显示图片的A标签外的所有A标签的index值变为1,并把透明度变为0.1
      prev.css({
        'z-index': 1, 'opacity': 0.1
      });
    });
  }, loop = setInterval(autoChange, 5000);//定义定时器,每5秒执行一次autoChange函数,达到自动播放效果。
  $con.hover(function () { //定义鼠标悬浮与离开事件
    clearInterval(loop); //鼠标悬浮时移除Loog定时器,即停止播放
  }, function () {
    loop = setInterval(autoChange, 5000); //鼠标离开时载放Loog定时器,继续播放
  });
  $btns.find('a').click(function () {//定义tab按钮事件
    i = $(this).index() - 1; //tab按钮中当前A标签的index值-1,并赋值给i计数器
    autoChange();  //调用切换方法切换图片
  });
});

不知亲们看完以上的注释,知道原理了并未有呢?其实整个代码分为四个部分:
1、图片切换 以i作为流速計,突显当前为i的图形,别的图片全部潜伏,给当下为i的按键加上ggOn样式,其它按键去除ggOn样式,而每趟调用切换函数时i自增1。
2、自动播放
概念三个沙漏loop,每5秒调用三回切换函数。
3、鼠标hover事件
原来正是鼠标悬浮时消释loop停车计时器,鼠标离开时载入loop机械漏刻。
4、开关事件
绑定tab开关单击事件,单击后给i赋上圈套前tab开关的index值-1,调用切换函数。

如上便是jquery达成图片轮播的全方位中央代码,希望咱们留意切磋,教程中仍存在不菲相差,希望大家给与修改。

本文实例陈述了jQuery完结宽屏图片轮播实例教程。共享给我们供大家参谋。具体如下:...

首先是初阶化部分:将除了第一张轮播图片意外的图样都遮掩,並且隐敝向前、向后按键,使第二个目录开关处于激活状态。

轮播效果分析:轮播效果大致能够分为3个部分:轮播图片,调整轮播图展现的按键(向左、向右按键,索引开关,每间距意气风发段时间交替显示轮播图片。轮播图的显示:要呈现的轮播图呈现,不要求展示的轮播图隐蔽;平时将这个轮播图片以一直的主意重叠在一块儿,每一回展现一张轮播图片。调节开关:鼠标点击或然移到目录开关下边时,展现对应索引地点的轮播图;向上、向下按键负担调控呈现上一张、下一张轮播图片。别的:日常索引按键有激活状态和未激活状态共2种境况;鼠标移到轮播图片上面时应该告大器晚成段落活动轮播,鼠标离开时初始活动轮播。

事件部分:通过jquery的hover(卡塔尔(قطر‎绑定鼠标上悬以至间隔时的事件管理, jquery的bind(卡塔尔(قطر‎方法绑定鼠标点击事件管理向前、向后翻看、轮播调控:pre, start结束活动轮播。

轮播效果落到实处笔记:jquery提供了丰盛的采用器以致用来抉择成分的措施,那宏大的简化了小编们的开销,例如$.filter(".slider-item-selected"卡塔尔国选用了方今处在激活状态的目录开关。两张轮播图的切换展现效果是经过jquery的fadeOut方法来促成的,具体的利用参照jquery的api;CSS透明背景的落实: background: rgba;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000卡塔尔国; ,宽容大部分主流浏览器满含IE;为何不行使opacity呢?因为opacity会使文字也透明。HTML骨架相当重点,你写的html的结果应该是爱不忍释的。

下卷是三个纯粹的jquery轮播插件, 该插件能够定制各类作用,方便的铺排以致可扩展。

   1 2 3 4   < >  

* { 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; 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; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);}.slider-next { left: 100%; margin-left: -28px;}
index.html[html] view plaincopy   jquery轮播效果图    * { 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; 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; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left: 100%; margin-left: -28px; }   $.ready { var length, currentIndex = 0, interval, hasStarted = false, //&#26159;&#21542;&#24050;&#32463;&#24320;&#22987;&#36718;&#25773; t = 3000; //&#36718;&#25773;&#26102;&#38388;&#38388;&#38548; length = $.length; //&#23558;&#38500;&#20102;&#31532;&#19968;&#24352;&#22270;&#29255;&#38544;&#34255; $('.slider-panel:not; //&#23558;&#31532;&#19968;&#20010;slider-item&#35774;&#20026;&#28608;&#27963;&#29366;&#24577; $.addClass('slider-item-selected'); //&#38544;&#34255;&#21521;&#21069;&#12289;&#21521;&#21518;&#32763;&#25353;&#38062; $.hide(); //&#40736;&#26631;&#19978;&#24748;&#26102;&#26174;&#31034;&#21521;&#21069;&#12289;&#21521;&#21518;&#32763;&#25353;&#38062;,&#20572;&#27490;&#28369;&#21160;&#65292;&#40736;&#26631;&#31163;&#24320;&#26102;&#38544;&#34255;&#21521;&#21069;&#12289;&#21521;&#21518;&#32763;&#25353;&#38062;&#65292;&#24320;&#22987;&#28369;&#21160; $('.slider-panel, .slider-pre, .slider-next').hover; $.show { $.hide; $.hover; var preIndex = $.filter(".slider-item-selected").index(); currentIndex = $; play(preIndex, currentIndex); }, function; $.unbind; $.bind { pre; $.unbind; $.bind { next; /** * &#21521;&#21069;&#32763;&#39029; */ function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex   length) % length; play(preIndex, currentIndex); } /** * &#21521;&#21518;&#32763;&#39029; */ function next() { var preIndex = currentIndex; currentIndex =   currentIndex % length; play(preIndex, currentIndex); } /** * &#20174;preIndex&#39029;&#32763;&#21040;currentIndex&#39029; * preIndex &#25972;&#25968;&#65292;&#32763;&#39029;&#30340;&#36215;&#22987;&#39029; * currentIndex &#25972;&#25968;&#65292;&#32763;&#21040;&#30340;&#37027;&#39029; */ function play(preIndex, currentIndex) { $.eq.fadeOut.children.fadeIn; $.removeClass('slider-item-selected'); $.eq.addClass('slider-item-selected'); } /** * &#24320;&#22987;&#36718;&#25773; */ function start { hasStarted = true; interval = setInterval; } } /** * &#20572;&#27490;&#36718;&#25773; */ function stop() { clearInterval; hasStarted = false; } //&#24320;&#22987;&#36718;&#25773; start;                     1 2 3 4   < >     

JavaScript:

时至前不久一个简易的jquery轮播效果就产生了,当然还也是有不菲亟待修正的地点。

$.ready { var length, currentIndex = 0, interval, hasStarted = false, //是否已经开始轮播 t = 3000; //轮播时间间隔 length = $.length; //将除了第一张图片隐藏 $('.slider-panel:not; //将第一个slider-item设为激活状态 $.addClass('slider-item-selected'); //隐藏向前、向后翻按钮 $.hide(); //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 $('.slider-panel, .slider-pre, .slider-next').hover; $.show { $.hide; $.hover; var preIndex = $.filter(".slider-item-selected").index(); currentIndex = $; play(preIndex, currentIndex); }, function; $.unbind; $.bind { pre; $.unbind; $.bind { 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) { $.eq.fadeOut.children.fadeIn; $.removeClass('slider-item-selected'); $.eq.addClass('slider-item-selected'); } /** * 开始轮播 */ function start { hasStarted = true; interval = setInterval; } } /** * 停止轮播 */ function stop() { clearInterval; hasStarted = false; } //开始轮播 start;

第一是开首化部分:将除了第一张轮播图片意外的图纸都藏匿,并且隐藏向前、向后按键,使第八个目录开关处于激活状态。事件部分:通过jquery的hover(卡塔尔(قطر‎绑定鼠标上悬以至间距时的事件管理, jquery的bind(卡塔尔(英语:State of Qatar)方法绑定鼠标点击事件管理向前、向后翻看、轮播调控:pre, start甘休活动轮播。上边包车型大巴js写的可比散,构造也不太好,读起来也比较为难,也不错使用,耦合度较高。下篇将付出一个自始自终的jquery轮播插件, 该插件能够定制各类成效,方便的配备以致可扩展。

上边是完全的代码:index.html

jquery轮播效果图 - by RiccioZhang * { 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; 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; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left: 100%; margin-left: -28px; } $.ready { var length, currentIndex = 0, interval, hasStarted = false, //&#26159;&#21542;&#24050;&#32463;&#24320;&#22987;&#36718;&#25773; t = 3000; //&#36718;&#25773;&#26102;&#38388;&#38388;&#38548; length = $.length; //&#23558;&#38500;&#20102;&#31532;&#19968;&#24352;&#22270;&#29255;&#38544;&#34255; $('.slider-panel:not; //&#23558;&#31532;&#19968;&#20010;slider-item&#35774;&#20026;&#28608;&#27963;&#29366;&#24577; $.addClass('slider-item-selected'); //&#38544;&#34255;&#21521;&#21069;&#12289;&#21521;&#21518;&#32763;&#25353;&#38062; $.hide(); //&#40736;&#26631;&#19978;&#24748;&#26102;&#26174;&#31034;&#21521;&#21069;&#12289;&#21521;&#21518;&#32763;&#25353;&#38062;,&#20572;&#27490;&#28369;&#21160;&#65292;&#40736;&#26631;&#31163;&#24320;&#26102;&#38544;&#34255;&#21521;&#21069;&#12289;&#21521;&#21518;&#32763;&#25353;&#38062;&#65292;&#24320;&#22987;&#28369;&#21160; $('.slider-panel, .slider-pre, .slider-next').hover; $.show { $.hide; $.hover; var preIndex = $.filter(".slider-item-selected").index(); currentIndex = $; play(preIndex, currentIndex); }, function; $.unbind; $.bind { pre; $.unbind; $.bind { next; /** * &#21521;&#21069;&#32763;&#39029; */ function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex   length) % length; play(preIndex, currentIndex); } /** * &#21521;&#21518;&#32763;&#39029; */ function next() { var preIndex = currentIndex; currentIndex =   currentIndex % length; play(preIndex, currentIndex); } /** * &#20174;preIndex&#39029;&#32763;&#21040;currentIndex&#39029; * preIndex &#25972;&#25968;&#65292;&#32763;&#39029;&#30340;&#36215;&#22987;&#39029; * currentIndex &#25972;&#25968;&#65292;&#32763;&#21040;&#30340;&#37027;&#39029; */ function play(preIndex, currentIndex) { $.eq.fadeOut.children.fadeIn; $.removeClass('slider-item-selected'); $.eq.addClass('slider-item-selected'); } /** * &#24320;&#22987;&#36718;&#25773; */ function start { hasStarted = true; interval = setInterval; } } /** * &#20572;&#27490;&#36718;&#25773; */ function stop() { clearInterval; hasStarted = false; } //&#24320;&#22987;&#36718;&#25773; start;    1 2 3 4   < >   

时至后天叁个简约的jquery轮播效果就完了了,当然还应该有众多亟需改善之处。

运用插件达成地方的效能看起来还满意,独一不足的正是:每一次必要轮播效果时,要将代码复制粘贴过去,假若稍稍部分须要改革(举例:轮播时的卡通效果,前生龙活虎篇使用的是jquery的淡入淡出效果,若是改成滑动作效果果,不可制止的要更改js代码),那么就须要对js代码实行改善,对本人所写的jquery轮播效果的js代码不纯熟的技师来讲,更正那个js确实非常不便。轮播插件所要完毕的靶子之生龙活虎便是插件能够灵活布署,技师只必要写小量的代码就能够兑现增进的成效,那自然是风流罗曼蒂克件很好的作业。本篇小说的轮播插件的html和css部分须求程序员自个儿编辑,而落时效果与利益的js只需求少许的编写制定。这里大家采用到的zslider插件在GitHub上开源:github:

(function { //---- Statics var DEFAULT_ANIMATE_TYPE = 'fade', ARRAY_SLICE = [].slice, ARRAY_CONCAT = [].concat ; //---- Methods function concatArray() { var deep = false, result = []; if(arguments.length > 0 && arguments[arguments.length - 1] === true) { deep = true; } for(var i = 0; i < arguments.length; i  ) { if(!!arguments[i].length) { if { for(var j = 0; j < arguments[i].length; j  ) { //recursive call result = ARRAY_CONCAT.call(result, concatArray(arguments[i][j], true)); } } else { result = ARRAY_CONCAT.call; } } else if(i != arguments.length - 1 || (arguments[arguments.length - 1] !== true && arguments[arguments.length - 1] !== false)) { result.push; } } return result; } //----- Core $.fn.extend({ zslider: function(zsliderSetting, autoStart) { var itemLenght = 0, currItemIndex = 0, started = false, oInterval = {}, setting = { intervalTime: 3000, step: 1, imagePanels: $(), animateConfig: { atype: 'fade', fadeInSpeed: 500, fadeOutSpeed: 1000 }, panelHoverStop: true, ctrlItems: $(), ctrlItemActivateType: 'hover' || 'click', ctrlItemHoverCls: '', flipBtn: {}, panelHoverShowFlipBtn: true, callbacks: { animate: null } }, that = this ; //core methods var slider = { pre: function() { var toIndex = itemLenght   (currItemIndex - setting.step) % itemLenght; slider.to; }, next: function() { var toIndex = (currItemIndex   setting.step) % itemLenght; slider.to; }, to: function { //handle the index value if(typeof toIndex === 'function') { toIndex = toIndex.call(that, concatArray(setting.imagePanels, true), concatArray(setting.ctrlItems, true), currItemIndex, step); } if) { toIndex = 0; } toIndex = Math.round % itemLenght; if { toIndex = itemLenght   toIndex; } var currentPanel = setting.imagePanels.eq, toPanel = setting.imagePanels.eq, currrntCtrlItem = setting.ctrlItems.eq toCtrlItem = setting.ctrlItems.eq ; if(!setting.callbacks.animate || setting.callbacks.animate.call(that, concatArray(setting.imagePanels, true), concatArray(setting.ctrlItems, true), currItemIndex, toIndex) === true) { currrntCtrlItem.removeClass(setting.ctrlItemHoverCls); toCtrlItem.addClass(setting.ctrlItemHoverCls); toPanel.fadeIn(setting.animateConfig.fadeInSpeed); currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed); } //set the current item index currItemIndex = toIndex; }, start: function { started = true; oInterval = window.setInterval(slider.next, setting.intervalTime); } }, stop: function { started = false; window.clearInterval; } }, isStarted: function() { return started; } }; function initData() { if { var temp_callbacks = zsliderSetting.callbacks; $.extend(setting, zsliderSetting); $.extend(setting.callbacks, temp_callbacks); itemLenght = setting.imagePanels.length; } //convert to the jquery object setting.imagePanels = $; setting.ctrlItems = $; setting.flipBtn.container = $(setting.flipBtn.container); setting.flipBtn.preBtn = $(setting.flipBtn.preBtn); setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn); } function initLook() { //show the first image panel and hide other setting.imagePanels.hide(); setting.imagePanels.filter; //activate the first control item and deactivate other setting.ctrlItems.removeClass(setting.ctrlItemHoverCls); setting.ctrlItems.filter.addClass(setting.ctrlItemHoverCls); $.css; if(setting.panelHoverShowFlipBtn) { showFlipBtn; } } function initEvent() { $(concatArray(setting.imagePanels, setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover { if(setting.panelHoverStop) { slider.stop(); } if(setting.panelHoverShowFlipBtn) { showFlipBtn; } }, function; if(setting.panelHoverShowFlipBtn) { showFlipBtn; if(setting.ctrlItemActivateType === 'click') { setting.ctrlItems.unbind; setting.ctrlItems.bind { slider.to; } else { setting.ctrlItems.hover { slider.stop.index { slider.start; } setting.flipBtn.preBtn.unbind; setting.flipBtn.preBtn.bind { slider.pre; setting.flipBtn.nextBtn.unbind; setting.flipBtn.nextBtn.bind { slider.next; } function init; initLook; } function showFlipBtn { var hasContainer = setting.flipBtn.container.length > 0, eles; eles = hasContainer ? setting.flipBtn.container : //to the dom array: /*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn), ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/ concatArray(setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true); if.show.hide; if(arguments.length < 2 || !!autoStart){ slider.start(); } return slider; } }); })(jQuery, window, document); 

本文由pc28.am发布于pc28.am,转载请注明出处:jquery轮播实例教程

上一篇:功用域和变量升高 下一篇:没有了
猜你喜欢
热门排行
精彩图文