Question

我在HTML，CSS和jQuery中为我的网站创建了一个简单的自动图像滑块。它非常适合图像。但是，我现在要做的是在每张幻灯片中放置两个元素，例如图片及其附带的文本。我已将下方的当前滑块附加到。

HTML

    <div id="slider">
        <ul class="slides">
            <li class="slide"><img src="slides/1.png" style="width: 1000; height: 360;"/></li>
            <li class="slide"><img src="slides/2.png" style="width: 1000; height: 360;"/></li>
            <li class="slide"><img src="slides/3.png" style="width: 1000; height: 360;"/></li>
            <li class="slide"><img src="slides/1.png" style="width: 1000; height: 360;"/></li>
        </ul>
    </div>

CSS

#slider {
    width: 1000px;
    height: 360px;
    overflow: hidden;
}

#slider .slides {
    display: block;
    width: 4000px;
    height: 360px;
    margin: 0;
    padding: 0;
}

#slider .slide {
    float: left;
    list-style-type: none;
    width: 1000px;
    height: 360px;
}

的jQuery

$(function() {
    var width = 1000;
    var animationSpeed = 1000;
    var pause = 5000;
    var currentSlide = 1;

    var $slider = $('#slider');
    var $slideContainer = $('.slides', $slider);
    var $slides = $('.slide', $slider);

    var interval;

    setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
            if (++currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
});

我想要的是每张图像旁边的图像360x640px和div / span为360x360px，每张幻灯片的总宽度为1000px。我尝试了很多想法，但似乎无法使其发挥作用。我希望有更多经验的人可以提供帮助。谢谢:)）

JQuery幻灯片 - 两个元素并排？

0 个答案: