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

Question

我点击左箭头时有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>

Answer 1

将position: absolute用于两个箭头，将position: relative用于其容器。使用top / right / bottom / left属性设置箭头的适当位置。

修改

＆＃13;

＆＃13;

$(document).ready(function() {

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

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

});

＆＃13;

input{
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="moveleft" type="image" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png" >

<input id="moveright" type="image" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改HTMl和CSS，如下例所示。

HTML：

<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> 

CSS：

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