Javascript 如何使用“我自己的”按钮；“下一步”；及；“以前的”；而是在运行时生成的按钮？

这段代码在运行时添加了一个跨度来更改幻灯片。如果我在屏幕左侧，则用“上一步”添加跨度；如果我在屏幕右侧，则用“下一步”添加跨度

（函数（）{
var scaler=scaler（'bg'），els=$（'#bg'）.children（），width=100/els.length；
var float=$（''）.css（{位置：'absolute'，颜色：'#fff'，光标：'pointer'，zIndex:2}）；
var div=$（''）.css（{position:'absolute'，left:0，bottom:0，marginRight:-20，height:'100%}）；
div.width（els.css（{float:'left'，width:width+'%}）.length+'00%'）.append（els）；
变量移动=函数（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）？“下一步”：“上一步”；//仅在需要时更改html
},
交换=功能（e）{
var key=e.type=='click'？（e.clientX>（document.body.clientWidth/2）？40:37）：e.keyCode；
if（键>36&&key38？'+1'：'-1'）。到*-1）+'00%}）；//与动画交换
}
$（窗口）.bind（'keydown'，swap）；
$（'#bg'）.bind（'mousemove'，move.）.bind（'click'，swap.）.css（'cursor'，'pointer'）.append（div，float）；
/*$（'#bg'）.cycle（{//如果使用jquery.cycle-plugin，窗口大小调整不会表现得太好-可修复
超时时间：2000，
在：函数（a，b，c）{scaler（c.currside）}之后，//但是这部分很重要-缩放当前照片
外汇：'滚动左'
});*/
})(); 

我想改变这种行为。我在标记中有自己的按钮，称为“下一步”和“上一步”，它们固定在屏幕的左右两侧

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

上一个
下一个

是否有人可以更改此代码以删除在运行时添加span的功能，并为我提供使用页面上始终可用的我自己的链接的便利

我在这里添加了工作JS小提琴

---

请参阅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 }));
    });
})(); 

（函数（）{
var scaler=scaler（'bg'），els=$（'#bg'）.children（），width=100/els.length；
var float=$（''）.css（{位置：'absolute'，颜色：'#fff'，光标：'pointer'，zIndex:2}）；
var div=$（''）.css（{position:'absolute'，left:0，bottom:0，marginRight:-20，height:'100%}）；
div.width（els.css（{float:'left'，width:width+'%}）.length+'00%'）.append（els）；
变量移动=函数（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）？“下一步”：“上一步”；//仅在需要时更改html
},
交换=功能（e）{
var key=e.type=='click'？（e.clientX>（document.body.clientWidth/2）？40:37）：e.keyCode；
if（键>36&&key38？'+1'：'-1'）。到*-1）+'00%}）；//与动画交换
}
$（窗口）.bind（'keydown'，swap）；
$（'#bg'）.css（'cursor'，'pointer'）.append（div，float）；
//bind（'mousemove'，move.）.bind（'click'，swap.）.css（'cursor'，'pointer'）.append（div，float）；
/*$（'#bg'）.cycle（{//如果使用jquery.cycle-plugin，窗口大小调整不会表现得太好-可修复
超时时间：2000，
在：函数（a，b，c）{scaler（c.currside）}之后，//但是这部分很重要-缩放当前照片
外汇：'滚动左'
});*/
$（“.next”）。单击（函数（）{
$（“#bg”）.trigger（jQuery.Event（“keydown”，{keyCode:39}））；
});
$（“.previous”）。单击（函数（）{
$（“#bg”）.trigger（jQuery.Event（“keydown”，{keyCode:37}））；
});
})(); 

嗯，试着从最后一行（不是注释掉的部分）删除

float

，这样你就得到了这个-

。append（div）而不是
.append（div，float）并查看是否有效。如果你有一个可以工作的演示，帮助会更容易。@fudgey-我在问题+1中添加了fiddle非常有帮助是的，它在我的示例中工作。但在我的实际项目中，它不起作用。“下一步”和“上一步”按钮在源代码中的位置是否与此相关？Jiten，代码中的更改是删除对div#bg的单击和鼠标移动操作。该代码还会在单击“下一步”和“上一步”时生成一个keydown事件。它们是右箭头键和左箭头键按下事件。我想知道您是否在JavaScript控制台中看到任何错误。是的，您的代码从#bg中删除了click和mousemove函数，但我的下一个和上一个按钮不起作用。我遇到了问题。它起作用了。实际上，在我的项目中，我使用了jQuery1.4.2，并使用1.6.4制作了JSFIDLE。
(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 }));
    });
})();