1

jQuery を使用してアニメーション化されたスライダーをセットアップしました:
jsFiddle デモ: http://jsfiddle.net/neal_fletcher/9zRDV/
スライドにわずかなオーバーハングを実現したかった理由は、つまり、スライド 1 を表示しているときに、スライド2など。スライダーはうまく機能し、実際に私が求めているものに最適ですが、現在、このスライダーにページャーを設定できるかどうかを調べています.slide-menu-item。可能な場合、スライダーは関連するスライドにスライドしますか?
もう1つの小さな問題もあります.ロード時にスライダーをアニメーション化することは可能ですか? したがって、ページャーは 5 秒ごとにスライドしますが、ページャー / 次および前のボタンを使用してスライダーをナビゲートすることはできますか?
どんな提案でも大歓迎です！
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)
    });
});
4

2 に答える 2

0 
for example ?

 $('#yourFavouriteIdForButtonThree').click(function(){
   slide('three', 600)
 });
于 2013-10-08T23:12:24.280 に答える