使用jquery显示简单轮播的描述

时间:2014-04-28 20:39:19

标签: javascript jquery html css

我正在构建一个简单的滑动转盘,显示一个带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/

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

我玩了几个小时,然后想出了这个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() );
        }

});