下一站永远 发表于 2012-12-10 15:40:44

jquery动画 -

<div id="cnblogs_post_body">  我将上一章中了插件做了个小小的升级,实现了自动运行效果,完整代码大家见demo。
  主要的变化点有:把‘下一条’、‘上一条’的click事件抽象到一个函数showNext中。添加setInterval,添加selector元素的hover事件。好了,我们一个个的看。
showNext函数:
<div class="cnblogs_code">//显示函数function showNext(flag) {    //隐藏导航    $(config.selector).find('a').css('display', 'none');    //创建遮罩    $.tranzify.createOverlay(config);    //获取当前显示状态的图片    var currImg = $('.' + config.visibleClass, $(config.selector));    if (flag === true) {      //当前图片不是第一张图片      if (currImg.prev().filter('img').length > 0) {            //将上一张图片设置为可显示状态            currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass);      } else {            //设置最后一张图片为可显示状态            currImg.removeClass(config.visibleClass);            $(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass);      }    } else {      //当前图片不是最后一张图片      if (currImg.next().filter('img').length > 0) {            //将下一张图片设置为可显示状态            currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass);      } else {            //设置第一张图片为可显示状态            currImg.removeClass(config.visibleClass);            $(config.selector).find('img').eq(0).addClass(config.visibleClass);      }    }    //运行遮罩效果    $.tranzify.runTransition(config);}
页: [1]
查看完整版本: jquery动画 -