單擊箭頭圖像時僅移動圖像

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> 

Java腳本

<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屬性為箭頭設置適當的位置。

編輯：

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

更改您的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;
    }