Question

这是我的代码，用于设置为页面宽度100％的图像滑块轮播。我的问题是为什么除了IE版本之外的所有内容都能正常工作？ IE 8 = Carousel即将结束。 IE 7/6 =所有图像都堆叠在一起。

JS：

var imageContainer = $('#imageContainer .container');
var imgs = $('#imageContainer .container .imageThumb');
var imgsDisp = $('#imageContainer .container .imageThumb img');
var imgsWidth;
var navWidth = 0;
var windowWidth = $(window).width();
var cnt = 0;
var imgOffset;
var navOffset;
var curImg = 1;

$(window).resize(function() 
{
    windowWidth = $(window).width();
    imgOffset =  (imgsWidth - windowWidth) / windowWidth;
    navOffset = (navWidth - windowWidth) / windowWidth;
    $('#imageContainer').css('width',windowWidth);
});

imageContainer.find('img').each(function()
{
    var $img    = $(this);
    $img.load(function()
    {
        ++cnt;
        if(cnt == imgs.length)
        {
            imgWidth = imageContainer.find('.imageThumb:first').width();
            imgHeight = imageContainer.find('.imageThumb:first').height();
            imgsWidth = (imgWidth * imgs.length) + (5 * imgs.length);
            imgOffset =  (imgsWidth - windowWidth) / windowWidth;
            $('#imageContainer').css({width:windowWidth});
            $('#imageContainer .container').css({width:imgsWidth});
            centerCurImg();
        }
        sizeImg($img, imageContainer.find('.imageThumb:first').width()-0, imageContainer.find('.imageThumb:first').height()-0);
        $img.css({'opacity':'.4'});
    })
});

$('#prev-btn').click(prevClickAdj);
$('#next-btn').click(nextClickAdj);

function centerCurImg()
{
    var destX = (windowWidth / 2 ) - (imgWidth*(curImg+1)) + (imgWidth/2);
    imageContainer.stop().animate({left:destX}, 400, 'easeOutCirc', function(){
        sizeHot();
    });
}

function sizeHot()
{
    $(imgsDisp[curImg]).stop().animate({height:imgHeight, width:imgWidth, opacity:1}, 400, 'easeOutCirc');

}

function sizeImg ( target, val, val2 )
{
    $(target).css({'width' : val, 'height' : val2});
}

function prevClickAdj()
{
    $(imgsDisp[curImg]).stop().animate({height:imgHeight-0, width:imgWidth-0, opacity:.4}, 400, 'easeOutCirc', function()
            {
        centerCurImg(); 
    });

    curImg --;
    checkArrows();

}

function nextClickAdj()
{
    //$(imgsDisp[curImg]).stop().animate({height:imgHeight-0, width:imgWidth-0, opacity:.4}, 400, 'easeOutCirc', function()
            {
        centerCurImg(); 
    });

    curImg ++;
    checkArrows();  
}

function checkArrows()
{
    if ( curImg > 0 )  $('#prev-btn').show();
    else $('#prev-btn').hide(); 

    if ( curImg < imgs.length-1 )  $('#next-btn').show();
    else $('#next-btn').hide(); 
}

HTML

            <div id="imageContainer">

                <div class="container">

                    <div class="imageThumb"> 

                        <div class="imageFull"><img src="/images/newyork/img_1.jpg" /></div>

                    </div>

                    <div class="imageThumb"> 

                        <div class="imageFull"><img src="/images/newyork/img_2.jpg" /></div>

                    </div>

                    <div class="imageThumb"> 

                        <div class="imageFull"><img src="/images/newyork/img_3.jpg" /></div>

                    </div>

                    <div class="imageThumb"> 

                        <div class="imageFull"><img src="/images/newyork/img_1.jpg" /></div>

                    </div>

                    <div class="imageThumb"> 

                        <div class="imageFull"><img src="/images/newyork/img_2.jpg" /></div>

                    </div>

                    <div class="imageThumb"> 

                        <div class="imageFull"><img src="/images/newyork/img_3.jpg" /></div>

                    </div>

                </div>

            </div>



        <div id="prev-btn"><a href="#">Previous</a></div>

        <div id="next-btn"><a href="#">Next</a></div>

    </div>

任何帮助都会受到赞赏！

跨浏览器实现的Jquery幻灯片显示失败

0 个答案: