0

我制作了一个由三张图片组成的幻灯片。我现在想重复完全相同的内容，但使用不同的图片。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)});
    }

});
4

1 回答 1

0

尝试在同一页面上复制您所拥有的内容将是一种折磨，您需要更改变量名称和函数，以免它们发生冲突，例如，当您添加幻灯片时，您可以将数字添加到不同的 id、变量（和功能/类）：

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

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

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

无需讨论如何：基本上，您将创建一个Slider具有自己属性的对象。这些东西本质上已经是这些幻灯片对象中的每一个的一部分，而不是像专门针对slides的变量和moveSlides()函数之类的东西。换句话说，当您创建幻灯片时，它将继承所有功能和变量（方法和属性）供自己使用。#slidesHolder

如果你从来没有听说过或做过这个，它可能听起来像是魔法，但是，就像我说的，花一些时间做那些教程（也许只是把它们都做完）。在首先掌握了 javascript 之后，我能够跳入 PHP 并使用 OOP 做同样的事情，所以它不仅仅是一个 javascript 或 jQuery 的东西。

希望对您有所帮助，您始终可以坚持第一个想法。

于 2013-06-07T17:21:53.417 回答