Develop Reference

I am creating an image slider and when the image is set back to the other side of the screen it wont continue moving

So my idea was that i move 4 images by 150px per click to the left and when an image reaches the end of the screen it gets to the other side so it could repeat the circle. But once the image actually gets on the right side of the screen it stops moving on click.
My Code
`// VARIABLE FOR THE MENU SLIDER
var move = 150;
// MEAL ITEM SLIDER IMAGES
var imgFood1 = document.getElementById('imgFood1')
var imgFood2 = document.getElementById('imgFood2')
var imgFood3 = document.getElementById('imgFood3')
var imgFood4 = document.getElementById('imgFood4')
imgFood1.style.position = "relative"
imgFood2.style.position = "relative"
imgFood3.style.position = "relative"
imgFood4.style.position = "relative"
function menuSlider(){
// GETTING THE POSITION OF THE IMAGES
var positionImg1 = imgFood1.getBoundingClientRect();
var positionImg2 = imgFood2.getBoundingClientRect();
var positionImg3 = imgFood3.getBoundingClientRect();
var positionImg4 = imgFood4.getBoundingClientRect();
// MOVING THE IMAGES
imgFood1.style.right=move+"px"
imgFood2.style.right=move+"px"
imgFood3.style.right=move+"px"
if(positionImg4.left > 0 ) {
imgFood4.style.right=move+"px"
}else {
imgFood4.style.left="500px"
}
// INCREMENTING THE MOVE VALUE FOR THE NEXT FUNCTION CALL
move+=150
}
button.addEventListener("click", menuSlider);
`

You can try the code bellow. Hope it fits your case.
var move = 150;
// MEAL ITEM SLIDER IMAGES
var imgFood1 = document.getElementById('imgFood1')
var imgFood2 = document.getElementById('imgFood2')
var imgFood3 = document.getElementById('imgFood3')
var imgFood4 = document.getElementById('imgFood4')
imgFood1.style.position = "absolute"
imgFood1.style.left = 0;
imgFood2.style.position = "absolute"
imgFood2.style.left = '150px';
imgFood3.style.position = "absolute"
imgFood3.style.left = '300px';
imgFood4.style.position = "absolute"
imgFood4.style.left = '450px';
function menuSlider(){
var arrayOfImages = [imgFood1,imgFood2,imgFood3,imgFood4];
for(let i = 0; i < arrayOfImages.length; i++) {
var positionImg = arrayOfImages[i].getBoundingClientRect();
var leftValue = parseInt(arrayOfImages[i].style.left);
if(positionImg.x < window.innerWidth) {
arrayOfImages[i].style.left = leftValue + move + "px"
}else {
arrayOfImages[i].style.left = '0px'
}
}
}
document.getElementById('myButton').addEventListener("click", menuSlider);
#myButton {
position: absolute;
top: 160px;
}
.images-container {
position: relative;
width: 100%;
height: 150px;
overflow: hidden;
}
<div class="images-container">
<img id="imgFood1" src="https://i.imgur.com/30XsebB.jpg" alt="cat" height="150" width="150"/>
<img id="imgFood2" src="https://i.imgur.com/30XsebB.jpg" alt="cat" height="150" width="150"/>
<img id="imgFood3" src="https://i.imgur.com/30XsebB.jpg" alt="cat" height="150" width="150"/>
<img id="imgFood4" src="https://i.imgur.com/30XsebB.jpg" alt="cat" height="150" width="150"/>
</div>
<button id="myButton" type="button" class="btn btn-default" data-dismiss="modal">Scroll</button>

I want to click a button and have a random image appear in a random location within my Container

I want to be able to have a random image appear in a random location everytime you click the bottom "Try" button.
I have been able to get it to randomize the image, but I am stumped on getting the random position to also apply to the images that get randomized.
<input id="input" type="text" placeholder="Enter a background colour...">
<button>enter</button>
<div id="container">
<img id="picture" src="img/img1.jpg">
</div>
<button onclick="randAll();" id = "randomButton">Try!</button>
<script>
var bColour = document.getElementById("container");
var button = document.querySelector("button");
button.addEventListener("click", clickHandler, false);
button.style.cursor = "pointer";
function clickHandler()
{
var input = document.querySelector("#input");
bColour.style.backgroundColor = input.value;
}
var pix = new Array("img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg");
function choosePic() {
var randomNum = Math.floor(Math.random() * pix.length);
document.getElementById("picture").src = pix[randomNum]
}
function randPos() {
Math.floor(Math.random() * 700);
}
</script>

Apply some CSS like this:
#picture {
position: absolute;
}
#container {
width: 750px;
height: 100px;
}
Then:
function randPos() {
var x = Math.floor(Math.random() * 700);
document.getElementById("picture").style.left = x + 'px';
}
Adjust the specific widths and heights I chose as needed.

How do i add next/previous buttons to my JavaScript (PHP/MySQL) image slider?

I have the following code that gets the images from MySQL database and displays them in a slider. Can anyone please tell me how do add the next/previous buttons to it. Any help would be appreciated, thanks !
<img id="slide" src="./pics/image1.jpg" alt="slideshow" width="300" height="300">
<script>
var time = 5000, // time between images
i = 0, // index for changing images
images = [], // array of img src from PHP
preloads = [], // array of preloaded images
slide = document.getElementById("slide");
images = <?php echo json_encode($paths); ?>; // from PHP to Js array
var len = images.length;
function changeImg(){
slide.src = preloads[i].src;
if (++i > len-1){
i = 0;
}
setTimeout(changeImg, time);
}
function preload(){
for (var c=0; c<len; c++){
preloads[c] = new Image;
preloads[c].src = images[c];
}
}
window.addEventListener("load", function(){
preload();
setTimeout(changeImg, time);
});

Following on from the previous thread How do i display images from MySQL database in a JavaScript image slider?, something like the following works. The first image is hard-coded into place, so that users with javascript turned off will still see the first image. Plus, that first image is visible while the page loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slideshow from PHP - Button Controlled</title>
<style>
p {
width: 300px;
display: flex; justify-content: space-between;
}
#prev, #next {
background: #aaa; padding: 5px; width: 6em;
text-align: center; cursor: pointer;
}
</style>
</head>
<body>
<div>
<img id="slide" src="./pics/image1.jpg" alt="slideshow" width="300" height="300">
<p>
<span id="prev">Previous</span>
<span id="next">Next</span>
</p>
</div>
<script>
var time = 5000, // time between images
i = 0, // index for changing images
images = [], // array of img src from PHP
preloads = [], // array of preloaded images
slide = document.getElementById("slide");
images = <?php echo json_encode($paths); ?>; // from PHP to Js array
var len = images.length;
function changeImg(dirn){
i += dirn;
if (i > len-1){
i = 0;
}
if (i < 0) {
i = len-1;
}
slide.src = preloads[i].src;
}
function preload(){
for (var c=0; c<len; c++){
preloads[c] = new Image;
preloads[c].src = images[c];
}
}
window.addEventListener("load", preload);
document.getElementById("prev").addEventListener("click", function(){
changeImg(-1);
});
document.getElementById("next").addEventListener("click", function(){
changeImg(1);
});
</script>
</body>
</html>

How can I get the following Javascript functions to execute on more than one image/div?

I have the following hacked code to fadein text and fadeout an image on hover. I want to repeat this affect on a second image/div but I can't get it to work. i tried copying all the scripting and changing the variable names (i.e. img2 instead of img1 etc.) and I tried adding multiple handlers to the existing code but it doesn't work. Only one image will fade while the other one does not. Please help. If it is not abdunantly clear, I am a Jquery wannabe who has some HTMl skills and a rudimentary understanding of programming. Thanks
<style type="text/css">
#imgContainer {
position: relative;
}
#img1 {
opacity: 100;
filter:alpha(opacity=100);
position: relative;
top: 0px;
left: 0px;
}
#imgContainer div {
position: absolute;
top: 20px;
left: 60px;`enter code here`
}
</style>
<script type="text/javascript">
var speed = 0.8;
var fadeTimerImg, fadeTimerTxt;
function fade(obj,dir){
if(fadeTimerImg){clearInterval(fadeTimerImg);}
if(fadeTimerTxt){clearInterval(fadeTimerTxt);}
fadeTimerImg = setInterval(function(){setOpacity(obj,dir)},100);
fadeTimerTxt = setInterval(function(){setOpacity(oTxtContainer,-dir)},100);
}
function setOpacity(obj,dir) {
obj.curOpac = obj.curOpac + (speed * dir);
if(obj.curOpac < 0){obj.curOpac = 0;}
if(obj.curOpac > 10){obj.curOpac = 10;}
if(typeof(obj.style.opacity) == 'string'){
obj.style.opacity = obj.curOpac/10;
} else {
obj.style.filter = 'alpha(opacity=' + obj.curOpac*10 + ')';
}
}
window.onload=function(){
var oImg1 = document.getElementById('img1');
oImg1.curOpac = 10; //10 = opaque
oTxtContainer = document.getElementById('txtContainer');
oTxtContainer.curOpac = 0; //0 = transparent
oImg1.onmouseover = function(){fade(this,-1);}
oImg1.onmouseout = function(){fade(this,1);}
}
</script>
<div id="imgContainer">
<div id="txtContainer">
s`enter code here`ome text<br />
more text <br />
some more text
</div>
<img id="img1" src="FRY751_A.jpg">
</div>

Add the same class to each image, and do this, for example:
window.onload=function(){
var $images = $('.my-image-class');
$images.each(function() {
$(this).curOpac = 10; //10 = opaque
$(this).onmouseover = function(){fade(this,-1);}
$(this).onmouseout = function(){fade(this,1);}
});
}

How can i put image into the <div id="item1"></div>?

I am facing this problem.. May i know, how can i put image into this element tag,
<div id="item1"></div>
The purpose of this code below, is when the user click "+" the image will appear. And When the user click "play" button, the image that appeared, is supposed to put into the tag as mentioned above.
Unfortunately, i am not able to make the image that just appear, to be put into the tag..
I know there is hardcoding method, but sorry, i am not looking for this method..
<!DOCTYPE html>
<html>
<head>
<script src="code.jquery.com/jquery-1.7.2.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.myClass {
width: 40px; height: 40px; float:left;
padding: 1px; margin:3px; position:absolute;
left:50px; top:60px; background:blue; color:white;
}
</style>
</head>
<body bgcolor="green";>
<div id="item1" class="myClass">F1</div>
<div id="item2" class="myClass">F2</div>
<div id="item3" class="myClass">F3</div>
<script>
var predator;
var Predatorlist = [];
function addvalue()
{
Predatorlist.push(uniqueid)
alert(Predatorlist);
}
function removevalue()
{
Predatorlist.pop(uniqueid)
alert(x.innerHTML=Predatorlist);
}
//************** End of Array ***********************
function Add() {
var id = Math.floor(Math.random()*101+1);
x = Math.random() * 550;
y = Math.random() * 250;
if (document.getElementById('amount').value < 50){
document.getElementById('amount').value++;
svg = document.getElementById("main");
var id = 'predator';
uniqueid = "frog" + document.getElementById('amount').value;
//namespaces for SVG
svgNS="http://www.w3.org/2000/svg";
xlinkNS="http://www.w3.org/1999/xlink";
// create a image element
image = document.createElementNS(svgNS, 'image');
// set id and other attributes
image.setAttributeNS(null, "id", uniqueid);
image.setAttributeNS(xlinkNS, "href","jef-frog.gif");
image.setAttributeNS(null, "x", x);
image.setAttributeNS(null, "y", y);
image.setAttributeNS(null, "width", "50");
image.setAttributeNS(null, "height", "50");
// append to svg
svg.appendChild(image);
} else {
alert("we got 50");
}
}
function Remove() {
if(document.getElementById('amount').value > 0)
{
document.getElementById('amount').value--;
svg = document.getElementById("main");
svg.removeChild(svg.lastChild);
}
}
function numinput(e){
// get the input value if enter
key=e.keyCode || e.which;
if (key==13){
total = document.getElementById("amount").value;
dummy = total;
// clear svg with image to avoid clearing the canvas
svg = document.getElementById("main");
element = svg.getElementsByTagName("image");
while(element.length>0){
element = svg.getElementsByTagName("image");
element[0].parentNode.removeChild(element[0]);
}
// use the input to create the number of frog.
while (dummy>0)
{
Add();
dummy--;
}
document.getElementById("amount").value = total;
}
}
function randomRange(min,max) {
return Math.random() * (max-min) + min;
}
/* Generate some random starting position */
var startItem1X = randomRange(50,100);
var startItem1Y = randomRange(50,100);
var startItem2X = randomRange(50,100);
var startItem2Y = randomRange(50,100);
var startItem3X = randomRange(50,100);
var startItem3Y = randomRange(50,100);
var startmyClassX = randomRange(50,100);
var startmyClassY = randomRange(50,100);
var item1 = $("#item1"),cycle1;
var item2 = $("#item2"),cycle1;
var item3 = $("#item3"),cycle1;
function runItem1() {
/* Set a the starting position to be random by editing the css */
$("#item1").css("left", startItem1X+"px");
$("#item1").css("top", startItem1Y+"px");
/* Cycle1 and Cycle2 variables allow infinite loop */
(cycle1 = function() {
var m = randomRange(50,100);
var n = randomRange(75,150);
item1.appendChild(image)
item1.animate({left:'+='+n},2000);
item1.animate({left:'+='+m, top:'+='+m}, 2000)
item1.animate({left:'-='+m, top:'+='+m}, 2000)
item1.animate({left:'-='+n},2000);
item1.animate({top:'-='+n},2000,cycle1)
})();
}
function runItem2() {
$("#item2").css("left", startItem2X+"px");
$("#item2").css("top", startItem2Y+"px");
(cycle2 = function() {
var m = randomRange(50,100);
var n = randomRange(75,150);
item2.animate({top:'+='+m, left:'+='+n},2000);
item2.animate({left:'-='+n},2000);
item2.animate({left:'+='+n, top:'-='+n},2000);
item2.animate({left:'-='+n},2000)
item2.animate({top:'+='+m},2000,cycle2)
})();
}
runItem1();
runItem2();
</script>
<SVG xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" id="main" style="border:inset 1px #000000;width:600;height:300"><param name='wmode' value='transparent'/></SVG>
<img src="jef-frog.gif" alt="frogsonice.com" width="100" height="100"/><BR/>
<INPUT type="button" value="+" onClick="Add(); addvalue();">
<INPUT type="text" id="amount" value=0 maxlength="3" size="1" onkeypress="numinput(evt)">
<INPUT type="button" value="-" onClick="Remove(); removevalue();">
<INPUT type="button" value="Play" onClick="runItem1(); runItem2();">
</body>
</html>
Many thanks to whoever out there, taking time to read and trying to help.. Thanks again..

would do it.
$('#your-play-button').click(function(e) {
$('#item1').html('<img src="mygif.gif" />');
});
edit after looking into your code you could replace:
document.getElementById('amount')
by $("#amount") etc. and really work with jQuery. Because now you don't use the advantage of jQuery, but you are just writing plain javascript...

well you can add a img tag using the innerhtml property or creating the element and appending it to div. then based on your logic you can set the tag's src of the image to the desired one.