jquery sliding banner

Question

I'm trying to make a sliding banner and it can control prev/next button...

and you can see demo right here -> http://fiddle.jshell.net/VgMNc/

the question is If i want to change the html code from this...

<p><a href="#">next</a></p>
<p><a href="#">prev</a></p> 

to

<a href="#" class="btnNext">next</a>
<a href="#" class="btnPrev">prev</a>

this~ What and How should I have change to jquery source?

please help me~ :)

(Full source on below)

<div class="visualIMG"> 
    <div class="visualList">
        <ul>
            <li>img1</li>
            <li>img2</li>
            <li>img3</li>
        </ul>
    </div>
    <p><a href="#">next</a></p>
    <p><a href="#">prev</a></p>
    <a href="#" class="visualIMG_play">play</a>
    <a href="#" class="visualIMG_stop">stop</a>
</div>



.visualIMG {width:202px; height:135px;}
.visualIMG p {float:left; width:50px; height:50px; margin:1px; background:gray }
.visualIMG .visualList {position:relative; overflow:hidden; float:left; width:118px; height:115px;}
.visualIMG .visualList ul {position:absolute; left:0px; top:0px; width:20000px; height:115px;}
.visualIMG .visualList ul li {float:left; width:118px; height:115px; background:#9CF}



var visualIMG_speed = 300; 
var visualIMG_time; 
var visualIMG_timeSpeed = 1000;
var visualIMG_auto = "Y";
function visualIMG_AC(sel){
    var obj = jQuery("."+sel); 
    var after_bt = obj.find(">p").eq(0); 
    var before_bt = obj.find(">p").eq(1); 
    var bn_play = obj.find(" .visualIMG_play"); 
    var bn_stop = obj.find(" .visualIMG_stop"); 

    obj.attr("clickCheck","on");

    after_bt.click(function(){visualIMG_after(obj);return false;});
    before_bt.click(function(){visualIMG_before(obj);return false;});

    bn_play.click(function(){visualIMG_play(obj);return false;});
    bn_stop.click(function(){visualIMG_stop(obj);return false;});

    if(visualIMG_auto == "Y"){
        visualIMG_play(obj);
    }
}
function visualIMG_after(obj){
    if(obj.attr("clickCheck") == "on"){
        visualIMG_stop(obj);
        obj.attr("clickCheck","off");
        var move_obj = jQuery(obj).find(" > div.visualList > ul"); 
        var move_obj_width = (move_obj.find(">li").width() * -1); 

        move_obj.find(">li").eq(0).clone().appendTo(move_obj);
        move_obj.animate(
            {left:move_obj_width}
            ,visualIMG_speed
            ,function(){

                move_obj.find(">li").eq(0).remove();
                move_obj.css("left","0");
                obj.attr("clickCheck","on");

                if(visualIMG_auto == "Y"){
                    visualIMG_play(obj);
                }
            }
        );
    }
}
function visualIMG_before(obj){
    if(obj.attr("clickCheck") == "on"){
        visualIMG_stop(obj);
        obj.attr("clickCheck","off");
        var move_obj = jQuery(obj).find(" > div.visualList > ul"); 
        var move_obj_width = (move_obj.find(">li").width() * -1);

        move_obj.find(">li:last").clone().prependTo(move_obj);
        move_obj.css("left",move_obj_width+"px");

        move_obj.animate(
            {left:0}
            ,visualIMG_speed
            ,function(){
                move_obj.find(">li:last").remove();
                obj.attr("clickCheck","on");

                if(visualIMG_auto == "Y"){
                    visualIMG_play(obj);
                }
            }
        );
    }
}

function visualIMG_play(obj){
    visualIMG_stop(obj);
    jQuery(obj).attr("timer",setInterval(function(){visualIMG_after(obj)},visualIMG_timeSpeed));
    return false;
} 
function visualIMG_stop(obj){

    clearInterval(jQuery(obj).attr("timer"));
    return false;
}
jQuery(document).ready(function() {
visualIMG_AC("visualIMG");
});

Answer 1

change

var after_bt = obj.find(">p").eq(0); 
var before_bt = obj.find(">p").eq(1); 

to

var after_bt = obj.find(".btnNext"); 
var before_bt = obj.find(".btnPrev"); 

Answer 2

To make it easier, you should probably add class next and prev to the anchor button. But then I think you can just change

var after_bt = obj.find("a.next"); 
var before_bt = obj.find("a.prev");

Answer 3

You didn't mentioned what you are changing about. If you want to change the pictures- just replace the existing pictures with your selected pictures on your local directories. But don't change the real name.

If you want to change sliding system you can change "float, position, alignment, etc. try out yourself."