Develop Reference

Weird action by javascript for onclick event

Hi! I'm trying to create a carousel/image slider which is automatic and reactable to onclick event but for somereason the onclick event messesup the automatic flow of the slider even though the code makes perfect sens!
Could someone tell me whats wrong in this code and a solution to fix it please! thank you!
var i = 0;
var images = [];
var time = 3000;
images[0] = "https://cache.lovethispic.com/uploaded_images/162514-Just-Breathe.jpg";
images[1] = "https://cache.lovethispic.com/uploaded_images/162513-Be-Someone-s-Sunshine.jpg";
images[2] = "https://cache.lovethispic.com/uploaded_images/162508-Don-t-Cry-.jpg";
var nextbutton=document.querySelector("#rightbutton");
nextbutton.addEventListener("click",rightbuttonclick);
var prevbutton=document.querySelector("#leftbutton");
prevbutton.addEventListener("click",leftbuttonclick);
function rightbuttonclick(){
i++;
changeImg();
}
function leftbuttonclick(){
i--;
changeImg();
}
function changeImg(){
document.getElementById('startersliders').src = images[i];
if(i < images.length - 1){
i++;
}
else {
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
function changenext(){
i++;
changeImg();
}
// Run function when page loads
window.onload=changeImg;
<button id="leftbutton">left</button>
<img id="startersliders" width="400" height="200"/>
<button id="rightbutton">right</button>

here is a code that can help you,
var prevbutton=document.querySelector("#leftbutton");
//nextbutton.addEventListener("click",leftbuttonclick);
prevbutton.addEventListener("click",leftbuttonclick);

Keep a variable eg: setTime that decides whether to call setTimeout again or not.
function rightbuttonclick() {
i++;
changeImg(false);
}
function leftbuttonclick() {
i--;
changeImg(false);
}
function changeImg(setTime) {
document.getElementById('startersliders').src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
// Run function every x seconds
if (setTime !== false)
setTimeout("changeImg()", time);
}
var i = 0;
var images = [];
var time = 3000;
images[0] = "https://cache.lovethispic.com/uploaded_images/162514-Just-Breathe.jpg";
images[1] = "https://cache.lovethispic.com/uploaded_images/162513-Be-Someone-s-Sunshine.jpg";
images[2] = "https://cache.lovethispic.com/uploaded_images/162508-Don-t-Cry-.jpg";
var nextbutton = document.querySelector("#rightbutton");
nextbutton.addEventListener("click", rightbuttonclick);
var prevbutton = document.querySelector("#leftbutton");
prevbutton.addEventListener("click", leftbuttonclick);
function rightbuttonclick() {
i++;
changeImg(false);
}
function leftbuttonclick() {
i--;
changeImg(false);
}
function changeImg(setTime) {
document.getElementById('startersliders').src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
// Run function every x seconds
if (setTime !== false)
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg();
<button id="leftbutton">left</button>
<img id="startersliders" width="400" height="200" />
<button id="rightbutton">right</button>
Or you can use setInterval instead of setTimeout as shown below:
var i = 0;
var images = [];
var time = 3000;
images[0] = "https://cache.lovethispic.com/uploaded_images/162514-Just-Breathe.jpg";
images[1] = "https://cache.lovethispic.com/uploaded_images/162513-Be-Someone-s-Sunshine.jpg";
images[2] = "https://cache.lovethispic.com/uploaded_images/162508-Don-t-Cry-.jpg";
var nextbutton = document.querySelector("#rightbutton");
nextbutton.addEventListener("click", rightbuttonclick);
var prevbutton = document.querySelector("#leftbutton");
prevbutton.addEventListener("click", leftbuttonclick);
function rightbuttonclick() {
i++;
changeImg(false);
}
function leftbuttonclick() {
i--;
changeImg(false);
}
function changeImg(setTime) {
document.getElementById('startersliders').src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
}
window.onload = changeImg();
setInterval(function() {
changeImg()
}, time);
<button id="leftbutton">left</button>
<img id="startersliders" width="400" height="200" />
<button id="rightbutton">right</button>

add a clearTimeout function to chageImg() and it will work,
as to why it was behaving strangely is because setTimeout was been called multiple times. you should always be careful when using setInverval or setTimeout. here is a code snippet
function changeImg(){
clearTimeout(interval);
document.getElementById('startersliders').src = images[i];
if(i < images.length - 1){
i++;
}
else {
i = 0;
}
// Run function every x seconds
interval = setTimeout("changeImg()", time);
}

CSS JS transition in slider

I've a slider in my code, it's need to be transition, but it doesn't work.
Here is the JS code
It's also not working in CSS...
It needs to be transitioning when the image is changing. I need a slow changing of images in my slider.
actually I tried this in js:
document.getElementById("img").style.transition = "5s ease";
Here is HTML
<div class="photo_div">
<img id="img" src="">
</div>
<button onclick="prev()">PREV</button>
<button onclick="next()">NEXT</button>
</div>
Here is JS
var names = ["img1.jpg", "img2.jpg", "img3.jpg"];
var index = 0;
function init() {
document.getElementById("img").src = "photo/" + names[index];
autoSlide();
}
function next() {
index++;
if (index == names.length) {
index = 0;
}
document.getElementById("img").src = "photo/" + names[index];
}
function prev() {
if (index == 0) {
index = names.length
}
index--;
document.getElementById("img").src = "photo/" + names[index];
}
function autoSlide() {
if (index < names.length) {
setInterval(function() {
next();
}, 3000);
}
}

In the next and prev functions fade out the image - and set queuing to true, then change the image, then fade the img tag back in.
You can try the following for next, and something similar for prev:
function next() {
index++;
if (index == names.length) {
index = 0;
}
$('#img').fadeOut("slow", "linear", function(){
document.getElementById("img").src = "photo/" + names[index];
$('#img').fadeIn("slow", "linear");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you can't use jQuery, maybe have a look at this.

Change images on hover

I have a webpage with an x amount of images, when i hover over an image, i want to have it change every second to an image from a list.
This is what i have come up with:
Fiddle
var images = [];
images[0] = "img1.png";
images[1] = "img2.png";
images[2] = "img3.png";
images[3] = "img4.png";
images[4] = "img5.png";
images[5] = "img6.png";
var i = 0;
setInterval(fadeDivs, 1000);
function fadeDivs() {
i = i < images.length ? i : 0;
$('img').fadeOut(100, function(){
$(this).attr('src', images[i]).fadeIn(100);
})
i++;
}
But there are 2 problems with this,
I want to have all the image links in the html like: <img src="img1.png"><img src="img2.png"> etc. contained in a div and make it visible or not(think that's the best way).
And i need it only to happen when i hover over the image.
Do you guys have any ideas? I don't need code, just a push in the right direction :)
To clarify: i have an x amount of images on a page, let's say 25, when i hover over one of the 25 it needs to start changing, i can't have 1 list with images(like the answers) because every image(of the 25) will have a different list.

JSFiddle
var images = [];
images[0] = "img1.png";
images[1] = "img2.png";
images[2] = "img3.png";
images[3] = "img4.png";
images[4] = "img5.png";
images[5] = "img6.png";
var interval;
var i = 0;
$(function () {
$("img").mouseover(function () {
interval = setInterval(fadeDivs, 1000);
})
.mouseout(function () {
clearInterval(interval);
});
});
function fadeDivs() {
i = i < images.length ? i : 0;
$('img').fadeOut(100, function() {
$(this).attr('src', images[i]).fadeIn(100);
});
i++;
}

Hope, this is what you're looking for. It adds all images to a container and starts an endless rotation when hovering. The interval is stopped, when leaving the element.
HTML
<div class="wrapper">
<img class="active" src="http://placehold.it/200x200&text=X1" alt="">
</div>
<div class="wrapper">
<img class="active" src="http://placehold.it/200x200&text=Y1" alt="">
</div>
CSS
.wrapper {
position: relative;
height: 200px;
margin-bottom: 250px;
}
.wrapper img {
opacity: 0;
position: absolute;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.wrapper img.active {
opacity: 1;
}
JavaScript
var wrapper = $('.wrapper');
var images = null;
var running = null;
images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X3', alt: '' } ) );
wrapper.eq(0).append(images);
images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y3', alt: '' } ) );
wrapper.eq(1).append(images);
wrapper.hover(
function() {
var e = $(this);
running = setInterval(function() {
var c = e.find('.active');
var n = c.next();
if (!n.length) {
n = e.children().first();
}
c.removeClass('active');
n.addClass('active');
}, 1000);
},
function() {
clearInterval(running);
running = null;
}
);
Demo
Try before buy

Try this: http://jsfiddle.net/6sbu79cy/1/
<div id="myimage">
<img src="http://www.avsforum.com/photopost/data/2277869/9/9f/9f50538d_test.jpeg" />
</div>
var images = [];
images[1] = "http://www.avsforum.com/photopost/data/2277869/9/9f/9f50538d_test.jpeg";
images[2] = "http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg";
var i = 0;
$('#myimage').hover(function(){ fadeDivs() });
function fadeDivs() {
setInterval(function(){
i = i < images.length ? i : 0;
console.log(i)
$('img').fadeOut(100, function(){
$(this).attr('src', images[i]).fadeIn(500);
})
i++;
}, 2000);
setTimeout(function(){},1000);
}

Create your images with data-index=0 and class identity.
//call fadeDivs on mouse over
$('.yourImages').hover(function(){
setInterval(fadeDivs(this),100);
});
//This will create unique fadeOut for all images which have mouse over action
//And separate index loadind
function fadeDivs(image) {
$(image).fadeOut(100, function(){
var index = $(this).data('index');
index = index < images.length ? index : 0;
$(this).attr('src', images[index]).fadeIn(100);
$(this).attr('data-index',index)
});
}

Here's a very simple solution, not much changed to your code.
I've added a hover listener to the image and a variable to the interval so that it can be cleared when you un-hover. Move a thing or two around as well.
https://jsfiddle.net/2nt2t09w/7/
var images = [];
images[0] = "http://placehold.it/100x100";
images[1] = "http://placehold.it/200x200";
images[2] = "http://placehold.it/300x300";
images[3] = "http://placehold.it/400x400";
images[4] = "http://placehold.it/500x500";
images[5] = "http://placehold.it/600x600";
var MyInterval;
var i = 0;
$('img').hover( function() {
MyInterval = setInterval(fadeDivs, 1000);
var $this = $(this);
function fadeDivs() {
i++;
i = i < images.length ? i : 0;
$this.fadeOut(100, function(){
$(this).attr('src', images[i]).fadeIn(100);
})
}
}, function() {
clearInterval(MyInterval);
});
img {
height:100px;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/100x100" />

when i hover over an image, i want to have it change every second to
an image from a list.
Build the array
Pre-load images for flicker-free experience
Start a timer on mouseover
Cycle the array changing the src
Stop the timer on mouseout
I want to have all the image links in the html like: etc. contained in a div and make
it visible or not(think that's the best way)
That's ok, but it will be better to create the images dynamically based on the size of your array, so that you don't have to hard-code the tags and you can easily dispose them off when required.
Here is a simple example (Fiddle: http://jsfiddle.net/vz38Lzw7/1/)
Snippet:
var x = [
'http://lorempixel.com/200/200',
'http://lorempixel.com/201/200',
'http://lorempixel.com/200/201'
];
var index = 0, $img = $("#image1");
/*--- Pre-load images ---*/
var d = []; // create an array for holding dummy elements
for (var i = 0; i < x.length; i++) {
d[i] = $("<img>"); // create an img and add to the array
d[i].attr('src', x[i]).hide(); // add src to img and hide it
$("body").append(d[i]); // add the img to body to start load
}
/*--- Bind events ---*/
$img.on("mouseover", function () {
timer = setInterval(changeImages, 1000);
});
$img.on("mouseout", function () {
clearInterval(timer);
});
/*--- Function to cycle the array ---*/
function changeImages() {
index = (index + 1) % x.length;
$img.fadeOut(250, function() {
$(this).attr('src', x[index]).fadeIn(250);
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="image1" src='http://lorempixel.com/200/200' />

Image auto swapping script doesnt show image most of the time?

I have the following script running to rotate between two of my logos.
What i am trying to do is the page will load and then the image will begin to rotate directly to the other image with out blank.
Here is the code:
var logo1 = "logo2.png";
var logo2 = "logo1.png";
var images = new Array (logo1, logo2);
var index = 1;
function rotateImage()
{
$('.logoimage').fadeOut('slow', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 5000);
});
<img class="logoimage" src="logo1.png" onmouseover="this.src='logo2.png'" onmouseout="this.src='logo1.png'" alt="Dear Leader" style="display: inline;">

Instead to use onmouseover and onmouseout you can use the jQuery hover.
While you are in the hovering function you have to stop the timer fading effects, in order to avoid the blinking effect.
My proposal is:
var logo1 = "https://ac3d197e9505f18c50e0-32b9f49f48b2c22be12b40ee79e2acc4.ssl.cf1.rackcdn.com/icon/logos_and_badges_thumbs_up/7x5uDqD4GBTrCSbXggZ-/58C79CAE-C3E6-4D6A-BAF5-A03631274FD7.png";
var logo2 = "https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png";
var images = new Array (logo1, logo2);
var index = 1;
var onHovering = false;
function rotateImage() {
if (onHovering) {
return; // prevent fading while hovering...
}
$('.logoimage').fadeOut('slow', function() {
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function() {
if (index == images.length-1) {
index = 0;
} else {
index++;
}
});
});
}
$(function () {
setInterval (rotateImage, 1000);
$('.logoimage').hover(function() {
onHovering = true;
$(this).attr('src', images[0]);
}, function() {
onHovering = false;
$(this).attr('src', images[1]);
});
});
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<img class="logoimage" src="https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png" alt="Dear Leader" style="display: inline;">

8 image change on mouse hover and return to default when left

i have an 8 img elements in my page -
<img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/>
<img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/>
On hover it should change from 1_1 to 1_2 till 1_8 and then 1_1 again. On mouse out it should show the default pic i.e 1_1. Like this i have 2_1, 3_1 till 8_1.
The javascript function for mousehover is -
function mousehover(x){
for(var i=2; i<9; i++){
x.src = x.src.replace('images/rotator/1_' + i + '.jpg');
}
}
function defaultImg(x){
x.src = x.src.replace("images/rotator/1_1.jpg");
}
Somehow this mouse hover func does not work. And how do i get the defaultImg for all the images on mouse out. I am stuck here. Any ideas?

Try the following.Should work:
var timer;
var i=2;
function mousehover(x){
x.src = 'images/rotator/1_' + i + '.jpg';
i++;
timer = setTimeout(function(){mousehover(x)},2000);
}
function defaultImg(x){
i=2;
clearTimeout(timer);
x.src = "images/rotator/1_1.jpg";
}

You can pass the first number as parameter in the function calls.
<img onmouseover="mousehover(this, 1)" onmouseout="defaultImg(this, 1)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/>
<img onmouseover="mousehover(this, 2)" onmouseout="defaultImg(this, 2)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/>
And the JavaScript would be:
var interval;
function mousehover(x, y) {
var i = 1;
interval = setInterval(function() {
i++;
if (i > 8) {
clearInterval(interval);
i = 1;
}
x.src = 'images/rotator/' + y + '_' + i + '.jpg';
}, 500);
}
function defaultImg(x, y) {
clearInterval(interval);
x.src = 'images/rotator/' + y + '_1.jpg';
}
For more performance, I would combine all images into one big sprite, and play with the background-position instead of loading a new image each time.

Something in these lines should work:
var element = document.querySelector("#switch");
element.addEventListener('mouseover', function() {
this.src = "http://placehold.it/400x300";
});
element.addEventListener('mouseout', function() {
this.src = "http://placehold.it/200x300";
});
Fiddle

You need something like this:
//TIP: Insert listeners with javascript, NOT html
x.addEventListener('mouseover', function () {
var count = 1,
that = this,
timer;
timer = setInterval(function () {
if (count < 8) {
count++;
} else {
count = 1;
}
that.src = 'images/rotator/1_' + count + '.jpg';
}, 500);
function onMouseOut() {
that.src = 'images/rotator/1_1.jpg';
that.removeEventListener('mouseout', onMouseOut)
}
this.addEventListener('mouseout', onMouseOut);
});