Slideshow with random pics

Slideshow with random pics - javascript

So I made this little Slideshow with HTML/CSS/JS and I want to make it so that the 6 images appear randomly and not 1,2,3.. more like 2,3,1.. for example. Any help is appreciated. Many thanks in advance.
JS:
var imagecount = 1;
var total = 6;
function slide(x) {
var Image = document.getElementById('img');
imagecount = imagecount + x;
if(imagecount > total){imagecount = 1;}
if(imagecount < 1){imagecount = total;}
Image.src = "images/img"+ imagecount +".jpg";
ChangeText(imagecount);
}
window.setInterval(function slideA(x) {
var Image = document.getElementById('img');
imagecount = imagecount + 1;
if(imagecount > total){imagecount = 1;}
if(imagecount < 1){imagecount = total;}
Image.src = "images/img"+ imagecount +".jpg";
ChangeText(imagecount);
}, 3000);
function ChangeText(imgNum){
var allImagesAndText = {1: "Seltene römische Goldmünze", 2: "Römische Funde", 3: "Römische Wandmalerei", 4: "Tutanchamun", 5: "Cheops Pyramide", 6: "Ägyptische Malerei"};
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
CSS:
#container {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
HTML:
<div id="container">
<div id="text1">Text</div>
<img src="images/img1.jpg" id="img" />
<div id="left_holder">
<img onClick="slide(-1)" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img onClick="slide(1)" class="right" src="images/arrow_right.png" />
</div>
</div>

You can create unique random image slider. So it doesn't repeat image multiple times (Soham's answer is fine but it will repeat same image multiple times in a row).
Something like this:
var imagecount = 1;
var total = 6;
var uniqueRandoms = [];
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = imagecount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
I used this SO answer.
And then in your code just call that function where you need it.
Example with your code just for autoslide is here https://jsfiddle.net/2gra4wk1/

You can add a function:-
function generateRandom(){
var x = Math.floor((Math.random() * 6) + 1); //generates random number from 1 to 6
return x;
}
And then call this function and use appropriately

Related

Image slider buttons not detecting click?

I have an image slider which is working fine rotating images alone using setInterval(). However, the buttons I've added to control which image is clicked aren't responding to click events.
I have used addEventListener and i'm currently using .on('click') but neither are working.
HTML:
<div id="sliderContainer">
<img src="assets/image0.png" id="sliderImage"/>
<div id="left_holder">
<img id="leftArrow" src="assets/arrow_left.png">
</div>
<div id="right_holder">
<img id="rightArrow" src="assets/arrow_right.png">
</div>
</div>
CSS:
#sliderContainer {
width: 700px;
height: 500px;
margin: 0 auto;
position: relative;
margin-bottom: 5% !important;
}
#sliderImage {
width: 700px;
height: 500px;
position: absolute;
}
#left_holder {
height: 500px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 500px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
#leftArrow {
height: 50px;
width: 50px;
position: absolute;
top: 45%;
left: 0px;
}
#rightArrow {
height: 50px;
width: 50px;
position: absolute;
top: 45%;
right: 0px;
}
JS:
$(document).ready(function () {
/*var leftbtn = document.getElementById("leftArrow");
var rightbtn = document.getElementById("rightArrow");*/
var imagecount = 0;
var total = 4;
console.log(imagecount);
function slider(x) {
var Image = document.getElementById('sliderImage');
imagecount = imagecount + x;
if (imagecount > total) {
imagecount = 0;
}
if(imagecount < 0) {
imagecount = total;
}
Image.src = "assets/image" + imagecount + ".png"
}
window.setInterval(function sliderA() {
var Image = document.getElementById('sliderImage');
imagecount = imagecount + 1;
console.log(imagecount);
if (imagecount > total) {
imagecount = 0;
}
if (imagecount < 0) {
imagecount = total;
}
Image.src = "assets/image" + imagecount + ".png"
},5000);
//EVENT LISTENERS
/*leftbtn.addEventListener("click", slider(-1));
rightbtn.addEventListener("click", slider(1));*/
$(document).on('click', '#leftArrow', slider(-1));
$(document).on('click', '#rightArrow', slider(1));
}); //Doc Ready

You have to pass an event handler (callback), not calling that function.
$(document).on('click', '#leftArrow', function() {
slider(-1);
});
$(document).on('click', '#rightArrow', function() {
slider(-1);
});

How to move two different images across the screen using JavaScript

I have been challenged with a website that requires me to make two images race at random across the screen to a finish line. I am required to make this happen using JavaScript. Unfortunately I have ran into some trouble here making this happen.
I have the script that allows a div container and an object "animate" (which is a small square) to move across the screen to the right as I am supposed to do. My question comes into play when trying to do this to two different images.
The goal is to have the animation I have created to apply to the images, I cannot figure out how to apply the functions to the images already placed on the page to make it seem as if they are racing on random intervals across the page to the finish line.
I understand the concept of the animation and the JavaScript behind it, I just dont understand how to make it apply to an image, and more than 1 image at that.
Please advise.
Here is my code that I am using: you can see that I left my demo animation on the page, and the two images I am looking to apply it to.
function myMove()
{
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame()
{
if (pos == 350)
{
clearInterval(id);
}
else
{
pos++;
elem.style.left = pos + 'px';
}
}
}
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="yeildLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<style>
body {
overflow: hidden;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#traffic-light {
height: 10pc;
width: 4pc;
background-color: #333;
border-radius: 20pc;
position: absolute;
}
.bulb {
height: 2pc;
width: 2pc;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>

Try this one:
function myMove()
{
var elemBluefish = document.getElementById("bluefish");
var elemBluefishWin = document.getElementById("bluefishwin");
var elemTurtle = document.getElementById("turtle");
var elemTurtleWin = document.getElementById("turtlewin");
var posBluefish = 0;
var posTurtle = 0;
var hasWinner = false;
elemBluefishWin.style.display = 'none';
elemTurtleWin.style.display = 'none';
var id = setInterval(frame, 5);
function frame()
{
if(posBluefish >= 350 && posTurtle >= 350)
{
clearInterval(id);
return;
}
if(posBluefish < 350)
{
posBluefish += Math.round(Math.random()*10);
if(posBluefish >= 350)
{
posBluefish = 350;
if(!hasWinner){
hasWinner = true;
elemBluefishWin.style.display = 'unset';
}
}
elemBluefish.style.left = posBluefish + 'px';
}
if(posTurtle < 350)
{
posTurtle += Math.round(Math.random()*10);
if(posTurtle >= 350)
{
posTurtle = 350;
if(!hasWinner){
hasWinner = true;
elemTurtleWin.style.display = 'unset';
}
}
elemTurtle.style.left = posTurtle + 'px';
}
}
}
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="yeildLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<style>
body {
overflow: hidden;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
}
#bluefishwin {
position: absolute;
right: 1pc;
top: 31pc;
display: none;
}
#turtlewin {
position: absolute;
right: 1pc;
top: 20pc;
display: none;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#traffic-light {
height: 10pc;
width: 4pc;
background-color: #333;
border-radius: 20pc;
position: absolute;
}
.bulb {
height: 2pc;
width: 2pc;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
/*#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}*/
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<img id="bluefishwin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<img id="turtlewin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>
It gets an element for each image and adds every 5ms a random amount of pixels (between 0 and 9) to each pos of image.
If both "racers" reached the target (350px) the interval is cleared and the race is over.
The winner gets an image displayed at the finish line.

an example:
function startRace() {
animateRacer("player1", true);
animateRacer("player2", true);
}
function animateRacer(playerId, reset) {
var elem = document.getElementById(playerId);
var pos = parseInt(elem.style.left, 10);
if (isNaN(pos) || reset) {
pos = 0;
}
//console.log(playerId + ': ' + pos);
if (pos < 450) {
pos += randStep(3);
elem.style.left = pos + 'px';
setTimeout('animateRacer("' + playerId + '")', randStep(5));
}
}
function randStep(max) {
var min = 1;
return Math.floor(Math.random() * (max - min)) + min;
}
body {
overflow: hidden;
}
#container {
width: 500px;
height: 160px;
position: relative;
background-color: yellow;
}
.player {
width: 50px;
height: 50px;
background-color: gray;
position: relative;
}
#player1 {
background-color: red;
top: 20px;
}
#player2 {
background-color: blue;
top: 40px;
}
<p>
<button onclick="startRace()">Start Race</button>
</p>
<div id="container">
<div id="player1" class="player"></div>
<div id="player2" class="player"></div>
</div>

function mover(obj) {
this.obj=obj;
this.pos = 0;
this.id = setInterval(this.frame, 5);
}
mover.prototype.frame=function() {
if (this.pos == 350) {
clearInterval(this.id);
} else {
this.pos++;
this.obj.style.left = this.pos + 'px';
}
}
}
Simply do:
img1=new mover(document.getElementById("pic1"));
You can repeat this with every image and you could store them into an array:
images=[];
function letsmove(){
images.push(new mover(someid));
...
}
And you can do this with all images on the site:
images=[];
function letsmove(){
domimages=document.getElementsByTagName("img");
domimages.forEach(function(img){
images.push(new mover(img));
});
}
}
See JS OOP and JS Prototyping for more explanation

JavaScript slideshow isn't working as intended

I made this little Slideshow with HTML/CSS/JS. Most of it is working but there is one thing which I can't figure out. How do I make it so the text above each image fits the img itself when autosliding is on? Right now it only shows the right title for each img when i manually click through. Any help is appreciated. Many thanks in advance.
var uniqueRandoms = [];
var indexCount = 0;
var allImagesAndText = ["Seltene römische Goldmünze", "Römische Funde", "Römische Wandmalerei", "Tutanchamun", "Cheops Pyramide", "Ägyptische Malerei"];
var total = allImagesAndText.length - 1;
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = indexCount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
function slide(x) {
if(indexCount + x >= 0 && indexCount + x <= total) {
clearInterval(sliderInterval);
indexCount += x;
var Image = document.getElementById('img');
Image.src = "images/img" + indexCount + ".jpg";
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
}
}
function update_dom() {
var left_holder = document.getElementById('left_holder');
var right_holder = document.getElementById('right_holder');
ChangeText(indexCount);
if(indexCount == 0) {
left_holder.style.display = "none";
} else if (indexCount == total) {
right_holder.style.display = "none";
} else {
right_holder.style.display = "block";
left_holder.style.display = "block";
}
}
function slideA() {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
Image.src = "images/img" + imagescount + ".jpg";
update_dom();
}
function ChangeText(imgNum) {
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
window.addEventListener("load", function() {
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
document.getElementById("right").addEventListener("click", function() {
slide(1);
});
document.getElementById("left").addEventListener("click", function() {
slide(-1);
});
});
#slideshow {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
<div id="slideshow">
<div id="text1">Text</div>
<img src="images/img0.jpg" />
<div id="left_holder">
<img id="left" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img id="right" class="right" src="images/arrow_right.png" />
</div>
</div>

I'm making an image slider but only the first image displays it does not display the rest

I'm making an image slider with images that hava name ending with the numbers 1 to 5 but only the first image displays. the path is fine and i've tried displaying each picture separately and that worked ...
<head>
<title>jQuery Image Slider</title>
<script src = "jquery-3.0.0.js"></script>
<style>
#container {
height: 300px;
width: 1350px;
margin: 20px auto;
position: relative;
}
#img {
height: 300px;
width: 1350px;
position: absolute;
}
#left-holder {
height: 100px;
width: 100px;
position: absolute;
left: 0px;
top: 100px;
}
#right-holder {
height: 100px;
width: 50px;
position: absolute;
right: 0px;
top: 100px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
</style>
<script>
var imageCount = 1;
var totalImages = 5;
function slide(x) {
var Image = document.getElementById("img");
imageCount = imageCount + x;
if (imageCount > totalImages)
imageCount = 1;
if (imageCount < 1)
imageCount = totalImages;
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
}
window.setInterval(function slideAuto() {
var Image = document.getElementById("img");
imageCount = imageCount + 1;
if (imageCount > totalImages)
imageCount = 1;
if (imageCount < 1)
imageCount = totalImages;
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
}, 1000);
</script>
</head>
<body>
<div id = "container">
<img id = "img" src = "E:\JavaScript work\Web Project\carousel1.jpg" />
<div id = "left-holder">
<img class = "left" onClick = "slide(-1)" src = "E:\JavaScript work\Web Project\left.png" />
</div>
<div id = "right-holder">
<img class = "right" onClick = "slide(1)" src = "E:\JavaScript work\Web Project\right.png" />
</div>
</div>
</body>

Problem: You are using backslash \ in src. Javascript uses backslash to escape.
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
Solution: Either use forward slash / or if you still want to use backslash you can use \\

Instead this
Image.src = "E:\JavaScript work\Web Project\carousel"+imageCount+".jpg";
use this:
Image.src = "E:\\JavaScript work\\Web Project\\carousel"+imageCount+".jpg";
at all better use relative address in image src.

Clickable bubble control auto slideshow pure JavaScript

How could I link the marked bubble to JavaScript auto slider (window.setInterval(function slideA() { ) ? Check codes to understand this issue. The slides go automatically, but the bubble only react on clicks.
var imagecount = 1;
var total = 3;
function slide(x) {
var Image = document.getElementById('img');
var nodes = document.getElementById('bubbles').getElementsByTagName('div');
for(var i=0; i<nodes.length; i++) {
if(i == imagecount-1) {
nodes[i].style.backgroundColor = '#F86215';
}
else {
nodes[i].style.backgroundColor = 'transparent';
}
}
imagecount = imagecount + x;
if (imagecount > total){ imagecount = 1;}
if (imagecount < 1){ imagecount = total;}
Image.src = "IMAGE/img"+ imagecount +".jpg";
}
window.setInterval(function slideA() {
var Image = document.getElementById('img');
imagecount = imagecount + 1;
if (imagecount > total){ imagecount = 1;}
if (imagecount < 1){ imagecount = total;}
Image.src = "IMAGE/img"+ imagecount +".jpg";
}, 5000);
function selectSlide(slideNumber){
imagecount = slideNumber;
var Image = document.getElementById('img');
Image.src = "IMAGE/img"+imagecount +".jpg";
}
function selectSlide(slideNumber, divid){
var nodes = document.getElementById('bubbles').getElementsByTagName('div');
for(var i=0; i<nodes.length; i++) {
nodes[i].style.backgroundColor = 'transparent';
}
divid.style.backgroundColor = '#F86215';
imagecount = slideNumber;
var Image = document.getElementById('img');
Image.src = "IMAGE/img"+imagecount +".jpg";
}
#img {
width: 100%;
position: relative;
height: auto;
}
.container-fluid {
width: 100%;
height: auto;
position: relative;
}
.container-fluid #left-arrow .left {
width: 60px;
position: absolute;
top: 31%;
left: 0px;
}
.container-fluid #right-arrow .right {
position: absolute;
top: 31%;
right: 0px;
width: 60px;
}
.container #left-arrow .left:hover {
cursor:pointer;
cursor: hand;
}
.container #right-arrow .right:hover {
cursor:pointer;
cursor: hand;
}
#bubbles{
width: 120px;
margin: 0px auto;
text-align: center;
top: 80%;
position: absolute;
left: 45%;
}
#bubbles > div{
display: inline-block;
width: 10px;
height: 10px;
margin: 24px 10px 0px 10px;
background: rgba(0,0,0,.1);
text-align: center;
border: 2px solid #F86215;
border-radius: 100%;
font-size: 19px;
text-decoration: none;
transition: background 0.3s linear 0s;
cursor: pointer;
}
<div class="container-fluid">
<img src="IMAGE/img1.jpg" alt="" id="img"/>
<div id="left-arrow"><img onClick="slide(-1)" class="left" src="IMAGE/arrow-left.png" alt=""/></div>
<div id="right-arrow"><img onClick="slide(1)" class="right" src="IMAGE/arrow-right.png" alt=""/></div>
<div id="bubbles">
<div onclick="selectSlide(1,this)" style="background:#F86215;"></div>
<div onclick="selectSlide(2,this)"></div>
<div onclick="selectSlide(3,this)"></div>
</div>
</div>

Took a while to get a JS only answer working, but here it is!
Updated HTML
<div id="bubbles">
<div class="bubble" onclick="selectSlide(1,this)" style="background:#F86215;"></div>
<div class="bubble" onclick="selectSlide(2,this)"></div>
<div class="bubble" onclick="selectSlide(3,this)"></div>
</div>
Updated Javascript
window.setInterval(function slideA() {
var image = document.getElementById('img');
imagecount = imagecount + 1;
if (imagecount > total) {
imagecount = 1;
}
if (imagecount < 1) {
imagecount = total;
}
image.src = "IMAGE/img" + imagecount + ".jpg";
var bubbles = document.getElementsByClassName("bubble");
var i;
for(i = 0; i < bubbles.length; i++) {
bubbles[i].style.backgroundColor = 'transparent';
}
document.getElementsByClassName("bubble")[imagecount - 1].style.backgroundColor = '#F86215';
}, 5000);
JSFiddle

Develop Reference

JavaScript is the programming language of the Web.

Slideshow with random pics - javascript

You can add a function:- function generateRandom(){ var x = Math.floor((Math.random() * 6) + 1); //generates random number from 1 to 6 return x; } And then call this function and use appropriately

Related

Image slider buttons not detecting click?

How to move two different images across the screen using JavaScript

JavaScript slideshow isn't working as intended

I'm making an image slider but only the first image displays it does not display the rest

Clickable bubble control auto slideshow pure JavaScript

Categories

Resources