3

div と javascript を使用して単純なスライダーを作成しようとしています。6 つの画像を含む div と、クリックされるたびに画像 528 ピクセル (各画像の幅) を保持するコンテナーをムービー化する矢印を設定しました。ギャラリーの最初または最後に到達したら、それぞれの矢印ボタンをフェードアウトさせて、ユーザーが次/前を押し続けないようにします。

どんな助けでも大歓迎です。

ジャバスクリプト

$("#btn-gallery-next").click(function(){
$("div#gallery li").not(this).removeClass('clicked');
$("div#gallery-slide").animate({left:"-=528px"});
if($("div#gallery-slide").position().left < -3168)
{
    $("#btn-gallery-next").fadeOut();
}
else {
    $("#btn-gallery-next").fadeIn();
}

});

$("#btn-gallery-prev").click(function(){
$("div#gallery li").not(this).removeClass('clicked');
$("div#gallery-slide").animate({left:"+=528px"});
if($("div#gallery-slide").position().left > 0)
{
    $("#btn-gallery-prev").fadeOut();
}
else {
    $("#btn-gallery-prev").fadeIn();
}

});

HTML

<div id="gallery-slide">
      <img class="gallery-img" src="_/img/gallery/img1.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img2.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img3.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img4.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img5.jpg" alt="" />
      <img class="gallery-img" src="_/img/gallery/img6.jpg" alt="" />
</div>
4

3 に答える 3

0

woothemes のflex スライダーを試してみてください。必要なものはすべて揃っています。

于 2013-07-04T19:13:17.180 に答える
0

デモを見る - http://codepen.io/vsync/pen/waKju?editors=011

JavaScript

/**
* Slider - loops over images
* SEP 2014
* By - Yair Even-Or
*/
var Slider = function(elm, prev, next){
    var that = this;
    this.locked = false;
    this.slider = elm;
    this.children = this.slider.children;
    this.itemWidth = this.children[0].clientWidth;

    this.preloadImages();

    next && next.addEventListener('click', function(){ that.move('next') });
    prev && prev.addEventListener('click', function(){ that.move('prev') });
}

Slider.prototype = { 
    move : function(dir){
        var that = this, 
            itemToMove;

        if( this.locked ){ 
            this.locked.removeAttribute('style');
            this.slider.appendChild(this.locked);
            clearTimeout(this.timer);
            moveToEnd();
        }

        // do nothing if there are no items
        if( this.children.length < 2 )
            return false;

        itemToMove = this.children[0];
        this.locked = itemToMove;

        if( dir == 'next' )
            itemToMove.style.marginLeft = -this.itemWidth + 'px';
        else{
            itemToMove = this.children[this.children.length-1];
            itemToMove.style.marginLeft = -this.itemWidth + 'px';
            this.slider.insertBefore(itemToMove, this.children[0]);
            setTimeout(function(){ 
                itemToMove.removeAttribute('style');
            },50);
            this.preloadImages();
            this.locked = false;
        }

        // move the child to the end of the items' list
        if( dir == 'next' )
            this.timer = setTimeout(moveToEnd, 420);

        function moveToEnd(el){
            itemToMove = el || itemToMove;
            if( !itemToMove ) return;
            itemToMove.removeAttribute('style');
            that.slider.appendChild(itemToMove);
            that.locked = false;
            that.preloadImages();
        }
    },
    preloadImages : function(){
      this.lazyload(this.children[1].getElementsByTagName('img')[0] );
      this.lazyload(this.children[this.children.length-1].getElementsByTagName('img')[0] );
    },
    // lazy load image
    lazyload : function(img){
        var lazy = img.getAttribute('data-src');
        if( lazy ){
            img.src = lazy;
            img.removeAttribute('data-src');
        }
    }
}




// HOW TO USE /////////////////
var sliderElm = document.querySelector('.content'),
    next = document.querySelector('.next'),
    prev = document.querySelector('.prev'),
    slider = new Slider(sliderElm, prev, next);

HTML (JADE 構文)

.slider
    a.arrow.next
    a.arrow.prev
    ul.content
        li
            img(src='image1.jpg')
        li
            img(src='image2.jpg')
        li
            img(src='image3.jpg')
        li
            img(src='image4.jpg')
于 2014-09-26T00:54:24.423 に答える