admin管理员组

文章数量:1330565

I have this id in my html code:

<div id="me">
<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"/>
</div>

how can i change the picture every 3 seconds once the mouse is over the picture,

and to go back to the original picture once the mouse is out?

I have this id in my html code:

<div id="me">
<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"/>
</div>

how can i change the picture every 3 seconds once the mouse is over the picture,

and to go back to the original picture once the mouse is out?

Share Improve this question asked Dec 3, 2011 at 18:52 itzzziiikitzzziiik 131 silver badge3 bronze badges 3
  • the easier way to do this would be using jQuery, think about retagging the question. and also please state where are the other pictures ing from? – alonisser Commented Dec 3, 2011 at 19:02
  • @alonisser - While it's true it might make it easier, we shouldn't force the OP's hand on what s/he wants to use. It would seem unnecessary to include 30K of library code for something that can be written in about 10 lines of plain ol' JavaScript. – Rob Hruska Commented Dec 3, 2011 at 19:05
  • 3 @alonisser - You don't need jQuery, it's really not that difficult without it, in plain Javascript. – Jared Farrish Commented Dec 3, 2011 at 19:05
Add a ment  | 

4 Answers 4

Reset to default 4

You can create a function that will change the image every 3 seconds. Then, when you mouse over the image, call the function and start a timer. When the mouse leaves the image, clear the timer.

var img = document.getElementById( "me" ).getElementsByTagName( "img" )[0];
var images = ["Me.JPG", "new image path", "..."];
var i = 1;
var timer;

function change() {
    img.src = images[i];
    if ( ++i >= images.length ) {
        i = 0;
    }
    timer = setTimeout( change, 3000 );
}

img.onmouseover = function() {
    timer = setTimeout( change, 3000 );
};

img.onmouseout = function() {
    img.src = images[0];
    clearTimeout( timer );
};

Here's a link to a quick solution on JsFiddle: http://jsfiddle/jJBEu/2/

var img = document.getElementById('me').getElementsByTagName('img')[0],
    index = 0,
    sources = [
        'http://icons.iconarchive./icons/iconka/social-treat/128/yumtube-icon.png',
        'http://icons.iconarchive./icons/iconka/social-treat/128/sweeter-icon.png',
        'http://icons.iconarchive./icons/iconka/social-treat/128/facebow-icon.png'
    ],
    timer;

img.addEventListener('mouseover', swapImages, false);
img.addEventListener('mouseout', function(){
    clearTimeout(timer);
    img.src = sources[0];
}, false);

function swapImages(event, setindex){
    index = index == (sources.length - 1) ? 0 : index + 1;
    timer = setTimeout(function(){
        img.src = sources[index];
        swapImages();
    }, 3000);
}

Edited to fix a dumb mistake where I was checking array index against length without subtracting 1.

html:

<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"
 onmouseover="animate(this)" onmouseout="stopanimation()" />

javascript:

/* globals */
var animTimer = null;
var animImg = null; 
var images = [new Image(), new Image(), new Image(), new Image(), new Image(),new Image()];
var imgIndex = 0;    

/* pre-load images in browser cash */
images[0].src = "Me.JPG";
images[1].src = "anim1.gif";
images[2].src = "anim2.gif";
images[3].src = "anim3.gif";
images[4].src = "anim4.gif";
images[5].src = "anim5.gif";

/* animation  */
function animate(img){
   if (typeof img != 'undefined'){animImg = img;}

   imgIndex += 1;
   if (imgIndex>images.length-1){imgIndex=1;}

   animImg.src=images[imgIndex].src; 
   animTimer = setTimeout(animate, 3000);
}

function stopanimation(){
   clearInterval(animTimer);
   animImg.src = images[0].src; 
}

Something like, just give the img an id of myImg (or whatever you want):

var img_arr = ["img1.png", "img2.png", "img3.png"],
    img_index = 0,
    interval_id = 0,
    div = document.getElementById("me"),
    img = document.getElementById("myImg");

div.onmouseover = function () {
    interval_id = window.setInterval(function () {
        if (img_index === (img_arr.length - 1)) {
            img_index = 0;
        }
        img.src = img_arr[img_index++];
    }, 3000);
};

div.onmouseout = function () {
    window.clearInterval(interval_id);
};

本文标签: htmlOnmouseover and timeout on javascriptStack Overflow