读书人

相干jCarouselLite 效果的改进版(个人

发布时间: 2012-11-23 22:54:33 作者: rapoo

有关jCarouselLite 效果的改进版(个人)---jquery

官方站点:http://gmarwaha.com/jquery/jcarousellite/

?

结构:

?

<div alt="相干jCarouselLite 效果的改进版(个人)-jquery"></li>         <li><img src="image/2.jpg" alt="相干jCarouselLite 效果的改进版(个人)-jquery"></li>         <li><img src="image/3.jpg" alt="相干jCarouselLite 效果的改进版(个人)-jquery"></li>      </ul></div>

?样式:

?? 主要控制 li 的宽与高。

?

js在html里的调用:

?

$(".carousel").jCarouselLite({      btnNext: ".next",      btnPrev: ".prev"});

?js地址:

??? http://www.estorm.cn/blog/demo/09/1109/jcarousellite_1.0.1.js

?

参数说明:

?? btnPrev : 上一张按钮
btnNext : 下一张按钮
btnGo : 标签控制,也就是用’1,2,3,4…’来控制
mouseWheel : 是否支持鼠标滑轮滚动,属性值:false / true;默认为false 打开此项需要jQuery UI插件支持
auto : 设置自动播放的速度,默认自动播放是关闭的,格式 auto: 800 (为播放速度)
speed : 动画效果速度
easing : 动画效果优化,姑且这么里面 需要外部插件支持
vertical : 动画方向,如果设置为true,则表示垂直滚动,默认为false
circular : 是否重复播放,如果设置为false,则到最后一个下一张按钮就点不动了,到第一张上一张按钮就点不动
visible : 设置默认显示几个li,默认是3个
start : 效果从第几个开始,默认为0
scroll : 一次滑动几个li,默认是2
beforeStart : 这个是接口,每次滑动效果执行之前执行的自定义函数
afterEnd : 这个是接口,每次滑动效果执行之后执行的自定义函数

?

主要强调的是我改一部分:

?

(function($) {                                          // Compliant with jquery.noConflict()$.fn.jCarouselLite = function(o) {    o = $.extend({        btnPrev: null,        btnNext: null,        btnGo: null,        mouseWheel: false,        auto: null,        speed: 200,        easing: null,        vertical: false,        circular: true,        visible: 3,        start: 0,        scroll: 1,        beforeStart: null,        afterEnd: null    }, o || {});    return this.each(function() {                           // Returns the element collection. Chainable.        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";        var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;        if(o.circular) {            ul.prepend(tLi.slice(tl-v-1+1).clone())              .append(tLi.slice(0,v).clone());            o.start += v;        }        var li = $("li", ul), itemLength = li.size(), curr = o.start;        div.css("visibility", "visible");        li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});        ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none",                    "z-index": "1"});        div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});        var liSize = o.vertical ? height(li) : width(li);          // Full li size(incl margin)-Used for animation        var ulSize = liSize * itemLength;                         // size of full ul(total length, not just for the visible items)        var divSize = liSize * v;                                 // size of entire div(total length for just the visible items)        li.css({width: li.width(), height: li.height()});        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));      //图片从第一个开始显示。(系统默认显示的3个,但是这3个,它会隐藏掉,        所以我把-(curr*liSize)改为0就可以了。)       //修改后的: ul.css(sizeCss, ulSize+"px").css(animCss, 0);         div.css(sizeCss, divSize+"px");                            // Width of the DIV. length of visible images        if(o.btnPrev)            $(o.btnPrev).click(function() {                return go(curr-o.scroll);            });        if(o.btnNext)            $(o.btnNext).click(function() {                return go(curr+o.scroll);            });        if(o.btnGo)            $.each(o.btnGo, function(i, val) {                $(val).click(function() {                    return go(o.circular ? o.visible+i : i);                });            });        if(o.mouseWheel && div.mousewheel)            div.mousewheel(function(e, d) {                return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);            });        if(o.auto)            setInterval(function() {                go(curr+o.scroll);            }, o.auto+o.speed);        function vis() {            return li.slice(curr).slice(0,v);        };        function go(to) {            if(!running) {                if(o.beforeStart)                    o.beforeStart.call(this, vis());                if(o.circular) {            // If circular we are in first or last, then goto the other end                    if(to<=o.start-v-1) {           // If first, then goto last                        ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");                        // If "scroll" > 1, then the "to" might not be equal to the condition;                            it can be lesser depending on the number of elements.                        curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;                    } else if(to>=itemLength-v+1) { // If last, then goto first                        ul.css(animCss, -( (v) * liSize ) + "px" );                        // If "scroll" > 1, then the "to" might not be equal to the condition;                          ?it can be greater depending on the number of elements.                        curr = to==itemLength-v+1 ? v+1 : v+o.scroll;                    } else curr = to;                } else {                    // If non-circular and to points to first or last, we just return.                    if(to<0 || to>itemLength-v) return;                    else curr = to;                }                           // If neither overrides it, the curr will still be "to" and we can proceed.                running = true;                ul.animate(                    animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,                    function() {                        if(o.afterEnd)                            o.afterEnd.call(this, vis());                        running = false;                    }                );                // Disable buttons when the carousel reaches the last/first, and enable when not                if(!o.circular) {                    $(o.btnPrev + "," + o.btnNext).removeClass("disabled");                    $( (curr-o.scroll<0 && o.btnPrev)                        ||                       (curr+o.scroll > itemLength-v && o.btnNext)                        ||                       []                     ).addClass("disabled");                }            }            return false;        };    });};function css(el, prop) {    return parseInt($.css(el[0], prop)) || 0;};function width(el) {    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');};function height(el) {    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');};})(jQuery);
?

问题:在修改之后,如果你定了显示的图片个数后,在没有满这个数时,你翻页的话,他翻了页之后就不能返回来了。

读书人网 >Web前端

热点推荐