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>
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>
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.