Как использовать собственную кнопку для кнопки «следующий» и «предыдущий» вместо кнопки, сгенерированной во время выполнения?

Question

Этот код добавляет диапазон во время выполнения, чтобы изменить слайд.Если я на левой стороне экрана, он добавляет диапазон с «предыдущим», а если я на правой стороне экрана, он добавляет диапазон с «следующим»

(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'
    });*/
})(); 

.У меня есть своя собственная кнопка в разметке под названием «следующий» и «предыдущий», которые зафиксированы слева и справа на экране.

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

Может ли кто-нибудь изменить этот код, чтобы удалить функциональность, которая добавляет диапазон во время выполнения и дать мне возможность использовать мои собственные ссылки, которые всегда доступны на странице.1009 * Я добавил рабочую скрипку JS здесь

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

Answer 1

Смотрите это изменение для jQuery / JavaScript.Это работает в моем браузере, который является 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 }));
    });
})();