How to use my own button for "next" and "previous" instead button generated on runtime?

This code is adding a span on runtime to change the slide. If I'm on left side of screen it add the span with "previous" and if I'm on right side on the screen it adds span with "next"

(function(){
    var scaler=Scaler('bg'),els=$('#bg').children(),width=100/els.length;
    var float=$('<span />').css({position:'absolute',color:'#fff',cursor:'pointer',zIndex:2});
    var div=$('<div/>').css({position:'absolute',left:0,bottom:0,marginRight:-20,height:'100%'});
    div.width(els.css({float:'left',width:width+'%'}).length+'00%').append(els);

    var move=function(e){
            float[0].style.left=(e=e||window.event).clientX+20+'px';
            float[0].style.top=e.clientY+20+'px';
            if(float[0].nxt!=(e.clientX>(document.body.offsetWidth/2)))float[0].innerHTML=(float[0].nxt=!float[0].nxt)?'next':'previous';   //Change html only if needed
        },
        swap=function(e){
            var key=e.type=='click'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode;
            if(key>36&&key<41)div.animate({left:(scaler(key>38?'+1':'-1').to*-1)+'00%'});   //swap with animation
        }

    $(window).bind('keydown',swap);
    $('#bg').bind('mousemove',move).bind('click',swap).css('cursor','pointer').append(div,float);

    /*$('#bg').cycle({ //if using jquery.cycle-plugin the window resizing won't behave too good - fixable
        timeout:2000,
        after:function(a,b,c){scaler(c.currSlide)}, //but this part is important - scale the current photo
        fx:'scrollLeft'
    });*/
})(); 

I want change this behavior. I have my own button in markup called "next" and "previous" which are fixed at left and right side on screen.

<div class="previous">Previous</div>
<div class="next">Next</div>

Can anyone change 开发者_运维知识库this code to remove the functionality which add the span on runtime and to give me the facility to use my own Links which are always available on the page.

I added working JS fiddle here

http://jsfiddle.net/jitendravyas/j66Fj/1/

See this change for the jQuery/JavaScript. This works on my browser which is Chrome.

(function(){
    var scaler=Scaler('bg'),els=$('#bg').children(),width=100/els.length;
    var float=$('<span />').css({position:'absolute',color:'#fff',cursor:'pointer',zIndex:2});
    var div=$('<div/>').css({position:'absolute',left:0,bottom:0,marginRight:-20,height:'100%'});
    div.width(els.css({float:'left',width:width+'%'}).length+'00%').append(els);

    var move=function(e){
            float[0].style.left=(e=e||window.event).clientX+20+'px';
            float[0].style.top=e.clientY+20+'px';
            //if(float[0].nxt!=(e.clientX>(document.body.offsetWidth/2)))float[0].innerHTML=(float[0].nxt=!float[0].nxt)?'next':'previous';   //Change html only if needed
        },
        swap=function(e){
            var key=e.type=='click'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode;
            if(key>36&&key<41)div.animate({left:(scaler(key>38?'+1':'-1').to*-1)+'00%'});   //swap with animation
        }

    $(window).bind('keydown',swap);
    $('#bg').css('cursor','pointer').append(div,float);
        //bind('mousemove',move).bind('click',swap).css('cursor','pointer').append(div,float);

    /*$('#bg').cycle({ //if using jquery.cycle-plugin the window resizing won't behave too good - fixable
        timeout:2000,
        after:function(a,b,c){scaler(c.currSlide)}, //but this part is important - scale the current photo
        fx:'scrollLeft'
    });*/
    $(".next").click(function(){
        $("#bg").trigger(jQuery.Event("keydown", { keyCode: 39 }));
    });
            $(".previous").click(function(){
        $("#bg").trigger(jQuery.Event("keydown", { keyCode: 37 }));
    });
})();