jquery Next/Prev Arrow (simple)

Here is the html:

<div class="dl-top">
                <img class="arrow-left" src="img/arrow_left.png" alt="" />
                    <div class="dl-image visible dl-1">
                        <img class="" src="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="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="img/dl-image3.jpg" alt="" />
                        <p class="headline">TEST #3: Sports are fun, yay!!</p>
                    </div开发者_C百科>
                <img class="arrow-right" src="img/arrow_right.png" alt="" />    
                </div>  

I just want a little jquery so when you click the img.arrow-left it makes the next div visible (dl-2=visible, dl-1, dl-2=hidden) and hides the rest, and reverses, with img.arrow-right.

makes sense?

EDIT: here is an attempt but it just makes all the divs .dl-image to display none; http://jsfiddle.net/xtian/jk4xR/

Try:

$(".arrow-left, .arrow-right").click(function() {
    var next_visible = $(this).hasClass(".arrow-left") ? 
            $(".dl-image:visible").prev(".dl-image") : 
            $(".dl-image:visible").next(".d1-image");
    $(".dl-image").hide();
    next_visible.show();
});

I haven't tried this specific code, but that's the general flow of one way to do it.

Try this(this code doesn't use dl-1, dl-2 etc):

$(function(){
        $(".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();
            }
        });
});