jquery - 图像滑块浮动修改

Question

这是我的网站：链接。我想更改图像滑块。现在最短的元素在错误的位置。我想要这样的结果：链接

这是我的代码：

 $.fn.imagesLoaded = function(callback){
    var elems = this.filter('img'),
    len   = elems.length,
    blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

    elems.bind('load.imgloaded',function(){
        if (--len <= 0 && this.src !== blank){ 
            elems.unbind('load.imgloaded');
            callback.call(elems,this); 
        }
    }).each(function(){
        if (this.complete || this.complete === undefined){
            var src = this.src;
            this.src = blank;
            this.src = src;
        }  
    }); 

    return this;
};

var rotImages = [];
var rotPointers = [];
var actual = 0;
var interv = null;

$(document).ready(function() {
    var checkInterv = window.setInterval(function() {

        var i = 0;
        var r = 0;

        $("#rotator_items").children("img").each(function() {

            if($(this).imagesLoaded() && $(this).width()>0)
                r++;

            i++;
        });

        if(i == r) {
            window.clearInterval(checkInterv);
            init();
        }

    },20)

});

function init() {
    var tmpPos = 0;
    var first = true;

    var i = 0;

    interv = window.setInterval(nextRotator,5000);

    $("#rotator_items > img").css({"position":"absolute","float":"none"});

    $("#rotator_items").children("img").each(function() {
        rotImages.push(this);

        var tmpWidth = $(this).width() * 300 / $(this).height();

        $(this).css({"width": tmpWidth + "px", "height":"443px"});

        if(first) {

            tmpPos = ($(window).width() - tmpWidth) / 2;

            $(this).css({"top":"0","left": tmpPos + "px"});

            tmpPos += tmpWidth;

            rotPointers.push($('<div class="pointer actual" n="'+i+'"><div></div></div>'));

            $("#pointer_wrap").prepend(rotPointers);

            first = false;

        } else {

            $(this).css({"top":"0","left": tmpPos + "px", "opacity":"0.2"});

            tmpPos += tmpWidth;

            rotPointers.push($('<div class="pointer" n="'+i+'"><div></div></div>'));

            $("#pointer_wrap").prepend(rotPointers);

        }

        i++;
    });


    for(i=0;i<rotImages.length;i++) {

        $("#rotator_items").append($(rotImages[i]).clone().css({"top":"0","left": tmpPos + "px", "opacity":"0.2"}));

        tmpPos += $(rotImages[i]).width();

    }


    first = true;

    for(i=rotImages.length;i>=0;i--) {

        if(first) {

            tmpPos = parseInt($(rotImages[0]).css("left")) - $(rotImages[i]).width();

            first = false;

        } else {

            tmpPos -= $(rotImages[i]).width();

        }

        $("#rotator_items").prepend($(rotImages[i]).clone().css({"top":"0","left": tmpPos + "px", "opacity":"0.2"}));

    }


    $(".pointer").click(function() {

        var clicked = parseInt($(this).attr("n"));

        moveRotator(clicked);

        window.clearInterval(interv);
        interv = window.setInterval(nextRotator,5000);

    });

}

$(window).resize(function() {
    var tmpPos = parseInt($(rotImages[actual]).css("left")) - (($(window).width() - $(rotImages[actual]).width() ) / 2 );

    $("#rotator_items").stop().css({"left": (-tmpPos) + "px"});

});

function moveRotator(target) {
    if(actual != target) {

        var tmpPos = parseInt($(rotImages[target]).css("left")) - (($(window).width() - $(rotImages[target]).width() ) / 2 );

        $("#rotator_items").stop().animate({"left": (-tmpPos) + "px"}, 1000);

        $(rotImages[target]).animate({"opacity":"1"},800);
        $(rotImages[actual]).animate({"opacity":"0.2"},500);

        $(rotPointers[target]).addClass("actual");
        $(rotPointers[actual]).removeClass("actual");

        actual = target;
    }
}

function nextRotator() {
    var next = actual+1;

    if(next>=rotImages.length) {
        next = 0;
    }

    moveRotator(next);  
}

我必须改变什么来制作左浮动图像？就像我的草稿图片一样。

Answer 1

引导它..^_^

在jquery上使用bootrap插件为您的网页效果，它的流畅！