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

Question

I have 7 images when click the left arrow i want to move the images towards left also same as right but my problem is when i click left and right arrow image also move along with image can any tell me to how move only the images not an arrow image see my code below

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

Use position: absolute for both arrows and position: relative to its container. Sett appropriate position for the arrows using top / right / bottom / left properties.

EDIT:

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

 input{ display: inline-block; } 

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

Answer 2

Change you HTMl, and CSS like example below.

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