jQuery以前的幻燈片懸停

Question

我有我的腳本設置，以便當用戶點擊上一個鏈接時，它會顯示上一張幻燈片，但是，我已經設置它，以便當用戶懸停在下一個和上一個按鈕上時下一張/上一張幻燈片的一小部分被反彈到視圖中，然後當鼠標移出這些按鈕時再次隱藏。

但是，上一張幻燈片沒有進入查看...我怎麼能得到這個工作？

我創建了我的腳本的的jsfiddle - http://jsfiddle.net/BHbGY/1/

Answer 1

Here's a working example of everything below。

我的方法是將第一個簡化的HTML：

<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> 

代替使用所有的固定寬度（例如width: 9999px;）的我設置所有屬性裏到100％的寬度和使用的位置絕對。然後，您可以簡單地更改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'以及prev中的'slide_container'一樣。

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