javascript - 如何创建一个使用 4 个图像而不是文本进行导航的 JQuery 内容 slider ？

Question

我有一张带有数字的图片。这些数字是 1-4。我想按数字放置它们，当用户单击 1 时，我希望它们转到幻灯片 1，如果他们单击 2，则转到幻灯片 2。这也需要具有滑动效果。

我将下面这个特定的 javascript 代码用于左右选项，但我不确定我是否可以出于我的目的重新使用它:

HTML 应该是这样的:

<img src="#" class="image_one">
<img src="#" class="image_two">
<img src="#" class="image_three">
<img src="#" class="image_four">

<div class="content_for_image_One" id="slide1">
You see this when you click on image 1
</div>

<div class="content_for_image_two" id="slide2">
You see this when you click on image 2
</div>

<div class="content_for_image_three" id="slide3">
You see this when you click on image 3
</div>

<div class="content_for_image_four" id="slide4">
You see this when you click on image 4
</div>

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

                var $sliderMask = $('#slider_mask');
                var $slideContainer = $('#slide_container');

                var $slides = $slideContainer.find('.slide');

                var slideCount = $slides.length;
                var slideWidth = $sliderMask.width();

                $slideContainer.width(slideCount * slideWidth);
                $slides.width(slideWidth);

                var currentSlide = 0;

                function animate() {
                    $slideContainer.stop().animate({ marginLeft: -(currentSlide * slideWidth) + 'px' }, 'slow');
                }

                $('#left_button').on('click', function () {
                    currentSlide = (currentSlide - 1 + slideCount) % slideCount;
                    animate();
                });

                $('#right_button').on('click', function () {
                    currentSlide = (currentSlide + 1) % slideCount;
                    animate();
                });

                $('#click_left').on('click', function () {
                    currentSlide = (currentSlide - 1 + slideCount) % slideCount;
                    animate();
                });

                $('#click_right').on('click', function () {
                    currentSlide = (currentSlide + 1) % slideCount;
                    animate();
                });


            });

</script>

Answer 1

您提供的 html 不适合您的代码，但我们假设您有以下 html:

<div id="slidesWrapper">

    <div id="slidesContainer">

        <div class="slide"><!-- your html --></div>
        <div class="slide"><!-- your html --></div>
        <div class="slide"><!-- your html --></div>
        <div class="slide"><!-- your html --></div>

    </div>

</div>

<div id="thumbnails">
    <img src="#" class="thumb" />
    <img src="#" class="thumb" />
    <img src="#" class="thumb" />
    <img src="#" class="thumb" />
</div>

使用以下 CSS:

#slidesWrapper {
    width: 1000px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

#slidesContainer {
    width: auto;
    position: aboslute;
}

.slide {
    float: left;
    height: 400px;
}

你可以使用类似的东西:

(function($){
    $(function() {
        var wrapper = $('#slidesWrapper'),
            container = $('#slidesContainer'),
            slides = container.children(),
            thumbs = $('#thumbnails').children();

        container.css('left', '0');

        thumbs.click(function() {
            var index = $('thumbnails').children().index(this);

            container.stop().animate({
                left: '-' + slides.eq(index).position().left + 'px'
            }, 1000);
        });
    });
})(jQuery);

虽然它没有经过测试，但我不太明白你想要什么。如果您有一个带有幻灯片的包装器，并且只有一个可见，固定宽度和高度，则此示例适合