加入Nav與Next/Prev Arrows - Jquery

Question

底部有三個導航鏈接，它們將顯示圖像和標題。該部分工作得很好，但用戶也可以點擊箭頭移動到下一個圖像/標題。這也應該改變底部導航，所以導航上的類是「.current」。所以用戶有兩種選擇來查看圖像/標題導航或箭頭，他們應該一起工作。

我已經把它全部的jsfiddle：http://jsfiddle.net/xtian/ZG5HN/

CSS：

a{text-decoration: none;} 
.visible{display:block;} 
.hidden{display:none;} 
.container{margin: 0 auto;width:298px;padding:0;overflow: hidden;} 
    .dl{background-color: #e9e9e9;float: left; width:100%;font-family: Arial;} 
    .dl .container .dl-top{float: left; width:301px;position: relative;margin-top:10px;} 
    .dl .container .dl-top img.arrow-left{position: absolute; bottom:11px; left:11px;z-index: 1; cursor: pointer;} 
    .dl .container .dl-top img.arrow-right{position: absolute; bottom:11px; right:11px;z-index: 1; cursor: pointer;} 
    .dl .container .dl-top .dl-image{float:left; width:300px; height:168px; position: relative;} 
    .dl .container .dl-top .dl-image p{float: left;width:224px;height: 30px;padding:6px 40px 5px 36px; font-size: 14px; font-weight: bold;color:#fff;background:transparent url(http://demo.omnigon.com/christian_bovine/snmobile/img/title_bg.png) repeat 0 0;position: absolute;bottom:0;line-height: 1.1; } 
    .dl .container ul{margin:0 auto;float:left;width:100%;list-style: none;padding:0;} 
    .dl .container ul li{background:transparent url(http://demo.omnigon.com/christian_bovine/snmobile/img/regular_bg.gif) repeat-x 0 0; float:left; width:98px;height:19px; padding-top:7px; border-right:1px solid #7b7b7b;text-align: center;} 
    .dl .container ul li.dl-nav-1{border-left:1px solid #7b7b7b;} 
    .dl .container ul li a{color:#000; text-align: center;font-size: 9px;font-weight: bold;} 
    .dl .container img.indicator{position: absolute; top:0;} 
    .dl .container ul li.current{background:transparent url(http://demo.omnigon.com/christian_bovine/snmobile/img/active_bg.gif) repeat-x 0 0;position: relative;} 
    .dl .container ul li.current a{color:#fff;} 
    .dl .container ul li.current span{position: absolute; left:45px; top: -3px;} 

HTML：

<div class="dl"> 
     <div class="container"> 
      <div class="dl-top"> 
       <img class="arrow-left" src="http://demo.omnigon.com/christian_bovine/snmobile/img/arrow_left.png" alt="" /> 
        <div class="dl-image visible dl-1"> 
         <img class="" src="http://demo.omnigon.com/christian_bovine/snmobile/img/dl-image1.jpg" alt="" /> 
         <p class="headline">Comebackers: Pitchers who need strong springs</p> 
        </div> 
        <div class="dl-image hidden dl-2"> 
         <img class="dl-2" src="http://demo.omnigon.com/christian_bovine/snmobile/img/dl-image2.jpg" alt="" /> 
         <p class="headline">TEST #2: Lets see how this one works</p> 
        </div> 
        <div class="dl-image hidden dl-3"> 
         <img class="dl-3" src="http://demo.omnigon.com/christian_bovine/snmobile/img/dl-image3.jpg" alt="" /> 
         <p class="headline">TEST #3: Sports are fun, yay!!</p> 
        </div> 
       <img class="arrow-right" src="http://demo.omnigon.com/christian_bovine/snmobile/img/arrow_right.png" alt="" />  
      </div> 
      <!-- dl top -->  
      <ul> 
       <li class="dl-nav-1 current"><a href="#">Spring Training 2001</a><span class="visible"><img src="http://demo.omnigon.com/christian_bovine/snmobile/img/indicator.png" alt="" /></span></li> 
       <li class="dl-nav-2"><a href="#">NFL 2011</a><span class="hidden"><img src="http://demo.omnigon.com/christian_bovine/snmobile/img/indicator.png" alt="" /></span></li> 
       <li class="dl-nav-3"><a href="#">Fantasy Baseball</a><span class="hidden"><img src="http://demo.omnigon.com/christian_bovine/snmobile/img/indicator.png" alt="" /></span></li> 
      </ul> 
     </div> 
     <!-- container --> 
    </div> 

的jQuery：

$(document).ready(function() { 
    //On Click Event 
    $(".dl-nav-1").click(function() { 
     $(".dl .container ul li").removeClass("current"); //Remove any "current" class 
     $(this).addClass("current"); 
     $(".dl-nav-2 span, .dl-nav-3 span, .dl-2, .dl-3").removeClass("visible").addClass("hidden"); 
     $(".dl-nav-1 span, .dl-1").removeClass("hidden").addClass("visible"); 
     return false; 
    }); 
    $(".dl-nav-2").click(function() { 
     $(".dl .container ul li").removeClass("current"); //Remove any "current" class 
     $(this).addClass("current"); 
     $(".dl-nav-1 span, .dl-nav-3 span, .dl-1, .dl-3").removeClass("visible").addClass("hidden"); 
     $(".dl-nav-2 span, .dl-2").removeClass("hidden").addClass("visible"); 
     return false; 
    }); 
    $(".dl-nav-3").click(function() { 
     $(".dl .container ul li").removeClass("current"); //Remove any "current" class 
     $(this).addClass("current"); 
     $(".dl-nav-1 span, .dl-nav-2 span, .dl-1, .dl-2").removeClass("visible").addClass("hidden"); 
     $(".dl-nav-3 span, .dl-3").removeClass("hidden").addClass("visible"); 
     return false; 
    }); 

    $(".arrow-left, .arrow-right").click(function(){ 
     var tgtDiv = null; 
     if($(this).hasClass("arrow-left")){ 
      tgtDiv = $(".dl-image:visible").prev(".dl-image"); 
     } 
     else{ 
      tgtDiv = $(".dl-image:visible").next(".dl-image"); 
     } 
     var allDivs = $(".dl-image"); 
     if(tgtDiv.length>0){ 
      allDivs.hide() 
      tgtDiv.show(); 
     } 
    }); 

    }); 

Answer 1

添加里面準備好下面的代碼功能：

$(document).keypress(function(event){ 
    if(event.keyCode == '37') { 
     tgtDiv = $(".dl-image:visible").prev(".dl-image"); 
    } 
    else if(event.keyCode == '39') { 
     tgtDiv = $(".dl-image:visible").next(".dl-image"); 
    } 
    var allDivs = $(".dl-image"); 
    if(tgtDiv.length>0){ 
     allDivs.hide() 
     tgtDiv.show(); 
    } 

})