Join Nav with Next/Prev Arrows - Jquery

There are three navigation links on the bottom that will display an image and headline. That part works pretty well, but the user can also click on the arrows to move to the next Image/headline. This should also change the bottom nav so the class on the nav is ".current". So a user has two options to see image/headline the navigation or arrows and they should work together.

I have put it all in 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: cente开发者_运维百科r;}
    .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();
        }
    });

    });

---

Add the following code inside ready function :

$(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();
     }

})