Question

我在此处添加了此幻灯片jquery库：http://bellated.us.lt/

实际上jquery将这一行加var slideWidth = 500;

所以在他们的时刻，只有最后一张幻灯片显示为需要。

var slideWidth = 500;给出500px宽度的约束。对于500px幻灯片，它工作正常，但我需要的是673px宽度。试图在查询脚本中将宽度更改为673px，但它变得更加凌乱。任何想法如何解决这个问题？

整个jquery脚本：

<script type="text/javascript">
$(document).ready(function() {

        var currentPosition = 0;
        var slideWidth = 500;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var slideShowInterval;
        var speed = 6000;

        //Assign a timer, so it will run periodically
        slideShowInterval = setInterval(changePosition, speed);

        slides.wrapAll('<div id="slidesHolder"></div>')

        slides.css({ 'float' : 'left' });

        //set #slidesHolder width equal to the total width of all the slides
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);



        manageNav(currentPosition);

        //tell the buttons what to do when clicked
        $('.nav').bind('click', function() {

            //determine new position
            currentPosition = ($(this).attr('id')=='rightNav')
            ? currentPosition+1 : currentPosition-1;

            //hide/show controls
            manageNav(currentPosition);
            clearInterval(slideShowInterval);
            slideShowInterval = setInterval(changePosition, speed);
            moveSlide();
        });

        function manageNav(position) {
            //hide left arrow if position is first slide
            if(position==0){ $('#leftNav').hide() }
            else { $('#leftNav').show() }
            //hide right arrow is slide position is last slide
            if(position==numberOfSlides-1){ $('#rightNav').hide() }
            else { $('#rightNav').show() }
        }


        //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
        function changePosition() {
            if(currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
                manageNav(currentPosition);
            } else {
                currentPosition++;
                manageNav(currentPosition);
            }
            moveSlide();
        }


        //moveSlide: this function moves the slide 
        function moveSlide() {
                $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
        }

    });
</script>

Answer 1

这只是造型问题。以下是我如何纠正它。

首先，我将slideWidth更改为673px。

var slideWidth = 673px;

接下来，我将#slidesHolder更改为非常宽的内容。只要它比slideWidth * numberOfSlides更宽，它的宽度并不重要。

#slidesHolder {
    width: 4000px;
}

最后，我将#slideshowWindow样式更改为673px。

#slideshowWindow {
    width: 673px;
}

这可以解决您遇到的问题。

另一个建议

您应该尝试使用setTimeout而不是setInterval。当您需要暂停或跳转到新幻灯片时，它可以让您更好地控制。

如何修改jquery幻灯片以正确显示图片？

1 个答案:

另一个建议