Javascript 单击箭头图像时仅移动图像

单击左箭头时我有7个图像我想向左移动图像也与向右移动图像相同，但我的问题是单击左箭头和右箭头时图像也随图像一起移动。是否可以告诉我如何仅移动图像而不是箭头图像请参见下面的代码

Html

<input id="moveleft" type="image" style="margin:13px 586px 6px -683px" src="image/left.png" >
<input id="moveright" type="image" style="margin:51px 0 0 62px" src="image/right.png" >



    <div class="img" id="textbox">

 <img  src="image/welcome.png" alt="welcome" width="87" height="137" style="margin:3px 0 0 -2px">

 <img src="image/happynewyear.jpg" alt="happynewyear" width="92" height="131" style="margin:-5px 0 5px -5px">

 <img src="image/happyeaster.jpg" alt="easter" width="92" height="131" style="margin:-1px 0 5px">

  <img src="image/imarahton.jpg" alt="easter" width="92" height="131" style="margin:-1px 0 4px -3px">

  <img src="image/happybirthday.jpg" alt="easter" width="93" height="131" style="margin:-4px 0 4px -3px">

   <img src="image/summer.jpg" alt="easter" width="93" height="131" style="margin:-4px 0 4px -2px">

    <img src="image/valentine.jpg" alt="easter" width="91" height="131" style="margin:-1px 0 4px -2px">

</div> 

Javascript

<script type="text/javascript">
$(document).ready(function() {

    $('#moveleft').click(function() {
        $('#textbox').animate({
        'marginLeft' : "-=30px" //moves left
        });
    });

    $('#moveright').click(function() {
        $('#textbox').animate({
        'marginLeft' : "+=30px" //moves right
        });
    });



});
</script>

$（文档）.ready（函数（）{
$（'#moveleft'）。单击（函数（）{
$（“#文本框”）。设置动画({
'marginLeft'：“-=30px”//向左移动
});
});
$（'#moveright'）。单击（函数（）{
$（“#文本框”）。设置动画({
“marginLeft”：“+=30px”//向右移动
});
});
});

对箭头和与其容器的

位置：相对使用
位置：绝对。使用
顶部
/
右侧
/
底部
/
左侧
属性设置箭头的适当位置

编辑：
$（文档）.ready（函数（）{
$（'#moveleft'）。单击（函数（）{
$（“#文本框”）。设置动画({
'marginLeft'：“-=30px”//向左移动
});
});
$（'#moveright'）。单击（函数（）{
$（“#文本框”）。设置动画({
“marginLeft”：“+=30px”//向右移动
});
});
});
输入{
显示：内联块；
}
更改HTMl和CSS，如下面的示例所示

HTML:

感谢您的回复，但箭头图像也随着移动images@arok查看我上面答案中的片段。它在不移动箭头位置的情况下工作。
<div class="slider">
    <input id="moveleft" type="image" src="image/left.png">
    <input id="moveright" type="image" src="image/right.png">



    <div class="img" id="textbox">

        <img src="image/welcome.png" alt="welcome" width="87" height="137" style="margin:3px 0 0 -2px">

        <img src="image/happynewyear.jpg" alt="happynewyear" width="92" height="131" style="margin:-5px 0 5px -5px">

        <img src="image/happyeaster.jpg" alt="easter" width="92" height="131" style="margin:-1px 0 5px">

        <img src="image/imarahton.jpg" alt="easter" width="92" height="131" style="margin:-1px 0 4px -3px">

        <img src="image/happybirthday.jpg" alt="easter" width="93" height="131" style="margin:-4px 0 4px -3px">

        <img src="image/summer.jpg" alt="easter" width="93" height="131" style="margin:-4px 0 4px -2px">

        <img src="image/valentine.jpg" alt="easter" width="91" height="131" style="margin:-1px 0 4px -2px">

    </div> 

.slider {
        position:relative;
    }
    #moveleft, #moveright {
        position:absolute;
        width:16px;
        height:16px;
        top:50%;
        margin-top:-8px;
    }
    #moveleft {
        left:5px;
    }
     #moveright {
        right:5px;
    }