javascript - 使用 jquery 显示简单的 carousal 描述

Question

我正在构建一个简单的滑动轮播，显示一个 3 个屏幕的 iPhone。每次按下下一个或上一个箭头时，它都会滑到新图像。我已经弄清楚了那部分，但是我无法显示/隐藏每张幻灯片的文本。现在，所有三个文本描述都在显示。

$(function () {
var onSlide = 0;
var moveSlide = 0;
var imageWidth;
    $('.iphone-overlay .nav-left')
        .on('click', function () {
            if (onSlide > -1) {
                onSlide--;
                doStuff();
            };
        })
    $('.iphone-overlay .nav-right')
        .on('click', function () {
            if (onSlide < 1) {
                onSlide++;
                doStuff();
            };
        })

    function doStuff() {
        console.log(onSlide);
        imageWidth = $('.banner-slider img').width();
        moveSlide = (imageWidth / 3) * onSlide;
        $('.banner-slider img').css('left', moveSlide);
    }

});

这是我的 jsfiddle:http://jsfiddle.net/WnQ7S/

任何帮助将不胜感激

Answer 1

我玩了几个小时，想出了这个 FIDDLE .

所有文本都隐藏在 .holder 中。

然后当移动不同的图像时，等效的文本被移动到图片下方的 div 中。

图像循环和计数的方式必须改变。

这是相关的JS

$(function () {
    var onSlide = 0;
    var moveSlide = 0;
    var imageWidth;
        $('.iphone-overlay .nav-left').on('click', function () {
                onSlide = onSlide - 1;
                if ( onSlide < 1 )
                {
                 onSlide = 3;
                 }
                 doStuff();
                                                                });
        $('.iphone-overlay .nav-right').on('click', function () {
                onSlide = onSlide + 1;
                if ( onSlide > 3 )
                {
                 onSlide = 1;
                 }
                 doStuff();
            });

        function doStuff() {
            console.log(onSlide);
            imageWidth = $('.banner-slider img').width();
            moveSlide = (imageWidth / 3) * onSlide;
            $('.banner-slider img').css('left', moveSlide);
            $('.putmehere').html('');
//            alert(onSlide);
            $('.putmehere').append( $('.holder .slide' + onSlide).html() );
        }

});