jQuery previous slide hover

Question

私は自分のスクリプトを設定しているので、ユーザが前のリンクをクリックすると前のスライドが表示されますが、私はそれを設定して、次のボタンと前のボタン次の/前のスライドの小さな部分が見えなくなり、マウスがこれらのボタンから離れると再び隠されます。

ただし、前のスライドは表示されません...どうすればこの機能を利用できますか？

私は私のスクリプトのjsfiddleを作成している - http://jsfiddle.net/BHbGY/1/

Answer 1

Here's a working example of everything below。私はすべてのLiが100％の幅に属性を設定しての位置を使用したいの代わりに、すべての固定幅（例えばwidth: 9999px;）を使用しての

<div id="slide_nav"> 
    <a href="#" class="prev">&laquo; Previous</a> 
    <a href="#" class="next">Next &raquo;</a> 
</div> 
<ul id="slide_container"> 
    <li class="one slide">one</li> 
    <li class="two slide focused">two</li> 
    <li class="three slide">three</li> 
</ul> 

：

私のアプローチは、最初にHTMLを簡素化するだろう絶対の。次に、left属性を変更して、物事を移動させることができます。

#slide_container li { 
    width: 100%; 
    height: 600px; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#slide_container .one { 
    background-color: #900; 
    left: -100%;  
} 

#slide_container .two { 
    display: block; 
    background-color: #090; 
} 

#slide_container .three { 
    background-color: #009; 
    left: 100%; 
} 

animateがはるか割合を好きではないので、これが最初でトリッキーに見えるかもしれません。次に、あなたのコードの構造を簡素化しますプラグインを、作成

// change all percentages to pixels because animate hates percent 
    // and seems to lose position over time 
    var base = 0-$('#slide_container li').eq(0).outerWidth(true); 
    $('#slide_container li').each(function() { 
     var $this = $(this); 
     $this.css('left', base+'px'); 
     base += $this.outerWidth(true); 
    }); 

：

$.fn.extend({ 
    slideMyDivs: function(method, amount) { 
     if (!amount) { 
      amount = this.eq(0).outerWidth(true); 
     } 
     switch (method) { 
     case 'prev': 
      this.stop(true, true).animate({ 
       left: '+=' + amount 
      }, { 
       duration: 600, 
       easing: 'easeInOutExpo' 
      }); 
      break; 
     case 'next': 
      this.stop(true, true).animate({ 
       left: '-=' + amount 
      }, { 
       duration: 600, 
       easing: 'easeInOutExpo' 
      }); 
      break; 
     default: 
      throw new Error('Invalid method: ' + method); 
     } 
     return this; 
    } 
}); 

それはそれをすべてを動作させるために、ページの読み込みで、この少し余分変換価値があるように、しかし、あなたの要素は自動的に、そのコンテナを記入します

その後、私はあなたがリストの末尾/先頭に達したときに、リンクを無効にする方法を設定します：

function toggleLinks() { 
    if (!hasPrev()) { 
     $('#slide_nav .prev') 
      .addClass('disabled') 
      .bind('click.disabled', function() { return false; }); 
    } 
    else { 
     $('#slide_nav .prev').removeClass('disabled').unbind('.disabled'); 
    } 

    if (!hasNext()) { 
     $('#slide_nav .next').addClass('disabled').bind('click.disabled', function() { 
      return false; 
     }); 
    } 
    else { 
     $('#slide_nav .next').removeClass('disabled').unbind('.disabled'); 
    } 
} 

代わりに、あなたはサイクルにそれをしたい場合は、バック（ビットSCOPを超えていますこの質問のe）に、あなたはそれがこのようなものでleft CSS属性の設定により、先頭に最後の要素を移動することができ：

function send_to_start($elm) { 
    var newPos = $('#slide_container li').eq(0).pos().left - $elm.outerWidth(true); 
    $elm.css('left', newPos+'px'); 
} 

その後、私はそうのようなイベントに設定したい：

$('#slide_nav a').mouseenter(function() { 
    if ($(this).hasClass('disabled')) { 
     return false; 
    } 
    else { 
     var p = $(this).hasClass('prev') ? 'prev' : 'next'; 
     showPreview(p); 
    } 
}).mouseleave(function() { 
    cancelPreview($(this).hasClass('prev') ? 'prev' : 'next'); 
}); 

$('#slide_nav .prev').click(function() { 
    cancelPreview('prev'); 
    if (hasPrev()) { 
     $('#slide_container li').slideMyDivs('prev').filter('.focused').removeClass('focused').prev().addClass('focused'); 
     toggleLinks(); 
    } 
    return false; 
}); 

$('#slide_nav .next').click(function() { 
    cancelPreview('next'); 
    if (hasNext()) { 
     $('#slide_container li').slideMyDivs('next').filter('.focused').removeClass('focused').next().addClass('focused'); 
     toggleLinks(); 
    } 
    return false; 
}); 

を

そしてここで、これらのイベントハンドラによって呼び出されるその他の関数です：

function showPreview(method) { 
    var p = method == 'prev', 
     $n = p ? $('#slide_container li.focused').prev() : $('#slide_container li.focused').next(); 
    $n.addClass('previewActive') 
     .slideMyDivs((p ? 'prev' : 'next'), '75'); 
} 

function cancelPreview(method) { 
    var p = method == 'prev'; 
    $('#slide_container li.previewActive') 
     .removeClass('previewActive') 
     .slideMyDivs((p ? 'next' : 'prev'), '75'); 
} 

function hasPrev() { 
    return $('#slide_container .focused').prev().length > 0; 
} 

function hasNext() { 
    return $('#slide_container .focused').next().length > 0; 
} 

function toggleLinks() { 
    if (!hasPrev()) { 
     $('#slide_nav .prev') 
      .addClass('disabled') 
      .bind('click.disabled', function() { return false; }); 
    } 
    else { 
     $('#slide_nav .prev').removeClass('disabled').unbind('.disabled'); 
    } 

    if (!hasNext()) { 
     $('#slide_nav .next').addClass('disabled').bind('click.disabled', function() { 
      return false; 
     }); 
    } 
    else { 
     $('#slide_nav .next').removeClass('disabled').unbind('.disabled'); 
    } 
} 

Answer 2

私はこれが何をしたいと思います。

あなたはマージンをオフにしただけでなく、横に 'slide_container li'、横には 'slide_container'があります。

http://jsfiddle.net/BHbGY/3/