Question

我制作了一个由三张图片组成的幻灯片。我现在想要重复完全相同但使用不同的图像。 image3.jpg，image4.jpg和image5.jpg。

有人可以帮忙吗？

HTML是：

<div id="slideshow">
 <div id="slideshowWindow">

    <div class="slide">
        <img src="images/slide1.jpg" />
    </div><!--/slide-->

    <div class="slide">
        <img src="images/slide2.jpg" />
    </div><!--/slide-->

    <div class="slide">
        <img src="images/slide3.jpg" />
    </div><!--/slide-->

</div><!--/slideshowWindow-->
</div><!--/slideshow-->

CSS是：

#slideshow {
position:relative;
top:10px;
left:80px;
margin-bottom:400px;
}

#slideshow #slideshowWindow {
width:500px;
height:95px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}

#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:500px; 
height:95px;
float:left;
position:relative;
}

jQuery是：

$(document).ready(function() {

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


    slideShowInterval = setInterval(changePosition, speed);

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

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

    $('#slidesHolder').css('width', slideWidth * numberOfSlides);


    function changePosition() {
        if(currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    }


    function moveSlide() {
            $('#slidesHolder')
              .animate({'marginLeft' : slideWidth*(-currentPosition)});
    }

});

Answer 1

尝试在同一页面上复制你所拥有的东西将是一次考验，你需要更改变量名称和功能，以便它们不会发生冲突，例如，当您添加幻灯片时，可以将数字添加到不同的id，变量（和函数/类）：

slides.wrapAll('<div id="slidesHolder"></div>');
slides2.wrapAll('<div id="slidesHolder2"></div>');
slides3.wrapAll('<div id="slidesHolder3"></div>');

有点麻烦，但还有其他方式（面向对象的方法）。 Jeff Way有一个很棒的jQuery入门课程，如果你有时间，值得做“强制性滑块（第一次刺）”和“Prototypal继承和重构滑块”

https://tutsplus.com/course/30-days-to-learn-jquery/

不涉及如何：基本上，您将创建一个具有自己属性的Slider对象。这些内容基本上都是这些幻灯片对象中的每一个，而不是像slides那样使变量和moveSlides()成为专门定位#slidesHolder的函数。换句话说，当您创建幻灯片时，它将继承自己使用的所有函数和变量（方法和属性）。

如果你从未听说过或做过这件事，那可能听起来像是巫术，但就像我说的那样，投入一些时间来做这些教程（也许就是这样做）。我能够跳到PHP中，并且在用javascript抓取它之后用OOP做同样的事情，所以它不仅仅是一个javascript或jQuery的东西。

希望有所帮助，你可以随时坚持第一个想法。

JQuery图像幻灯片重复

1 个答案: