javascript - jQuery:动画 slider 寻呼机

Question

我已经使用 jQuery 设置了一个动画 slider :
jsFiddle 演示:http://jsfiddle.net/neal_fletcher/9zRDV/
原因是我想在幻灯片上实现轻微的悬垂，即在查看幻灯片 1 时，您可以看到幻灯片 2 等的一些内容。 slider 效果很好，实际上非常适合我所追求的，虽然现在我我正在尝试弄清楚是否可以为此 slider 设置寻呼机，其目的是单击 .slide-menu-item slider 将滑动到相关幻灯片，如果可能的话？
还有一个小问题，是否可以在加载时为 slider 设置动画？因此，寻呼机将每 5 秒滑动一次，但您仍然可以使用寻呼机/下一个和上一个按钮导航 slider 吗？
任何建议将不胜感激!
HTML:

<div class="outerwrapper">
    <div class="innerwrapper">
        <div class="inner-slide">SLIDE 01</div>
        <div class="inner-slide">SLIDE 02</div>
        <div class="inner-slide">SLIDE 03</div>
        <div class="inner-slide">SLIDE 04</div>
        <div class="inner-slide">SLIDE 05</div>
        <div class="inner-slide">SLIDE 06</div>
        <div class="inner-slide">SLIDE 07</div>
    </div>
</div>

<ul id="slide-menu">
    <li id="one" class="slide-menu-item">01</li>
    <li id="two" class="slide-menu-item">02</li>
    <li id="three" class="slide-menu-item">03</li>
    <li id="four" class="slide-menu-item">04</li>
    <li id="five" class="slide-menu-item">05</li>
    <li id="six" class="slide-menu-item">06</li>
    <li id="seven" class="slide-menu-item">07</li>
</ul>

<div id="left">LEFT</div>
<div id="right">RIGHT</div>

CSS:

.outerwrapper {
    position: absolute;
    left: 50%;
    height: 250px;
    width: 400px; margin-left: -225px;
    border: 1px solid black;
    overflow: hidden;
    padding-left: 50px;
}
.innerwrapper {
    height: 250px;
    width: 4000px;
}
.inner-slide {
    height: 250px;
    width: 350px;
    float: left;
    background: silver;
}
.innerwrapper div:nth-child(odd) {
    background: silver;
}
.innerwrapper div:nth-child(even) {
    background: red;
}
#left, #right {
    position: absolute;
    cursor: pointer;
}
#left {
    left: 10px; bottom: 10px;
}
#right {
    right: 10px; bottom: 10px;
}

#slide-menu {
    position: absolute;
    top: 250px;
    list-style: none;
}

.slide-menu-item {
    display: inline-block;
    width: 50px;
    cursor: pointer;
}

jQuery:

var animating = false,
    slideWidth = $('.inner-slide').width(),
    $wrapper = $('.outerwrapper'),
    slideIndex = 2,
    slideLen = $('.inner-slide').length,

    build = function() {
        $firstClone = $('.inner-slide').eq(0).clone();
        $secondClone = $('.inner-slide').eq(1).clone();
        $preLastClone = $('.inner-slide').eq(slideLen - 2).clone();
        $lastClone = $('.inner-slide').eq(slideLen - 1).clone();
        $wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone);
        $wrapper.animate({
            scrollLeft: '+=' + slideWidth * slideIndex + 'px'
        }, 0);
    },
    slide = function(dir, speed) {
        if(!animating) {
            animating = true;
            dir == 'right' ? slideIndex++ : slideIndex--;
            slideIndex == slideLen - 1 ? slideIndex == 0 : '';

            if(slideIndex == 0 && dir == 'left') {
                //if the slide is at the beginning and going left

                slideIndex = slideLen + 1;                
                $wrapper.animate({
                    scrollLeft: slideIndex * slideWidth + 'px'
                }, 0, function() {
                    animating = false;    
                });
                slideIndex--;

            } else if(slideIndex == slideLen + 2 && dir == 'right') {
                //if the slide is at the end and going right

                slideIndex = 1;                
                $wrapper.animate({
                    scrollLeft: slideIndex * slideWidth + 'px'
                }, 0, function() {
                    animating = false;    
                });
                slideIndex++;

            }
            $wrapper.animate({
                scrollLeft: slideIndex * slideWidth + 'px'
            }, speed, function() {
                animating = false;    
            });
        }
    };

$(function() {
    build();
    $('#right, #left').on('click', function() {
        slide($(this).attr('id'), 600)
    });
});

Answer 1

添加slideTo函数:

slideTo = function (index, speed) {
    slideIndex = index+1;
    $wrapper.animate(
        {scrollLeft: slideIndex * slideWidth + 'px'},
        speed, function () {animating = false;}
    );
}

然后当你点击其中一个页面按钮时调用它:

$('.slide-menu-item').click(function() {
    var toSlideIndex = Math.round($(this).text());
    slideTo(toSlideIndex, 600);
});

然后，要使其每 5 秒自动滑动一次，请添加:

setInterval(function() {slide("right", 600);}, 5000);

JSFiddle 演示:http://jsfiddle.net/9zRDV/3/