How to make images change automatically

Question

I am new to javascript and I am trying to do a featured content slider something like the top banner in this website http://www.homeplus.co.kr

As you can see, the top big banner changes automatically & also will change when user hovers over one of the list at the right.

Right now I am able to do the hovering part, but I am still stuck at the automatic changing content part.

Here's a sample jsfiddle: http://jsfiddle.net/StormSdq/5tWPy/2/

<div class="pi">a</div>
<div class="pi">b</div>
<div class="pi">c</div>
<div class="pi">d</div>
<div class="c1">I DREAM</div>
<div class="c1">OF LLAMAS</div>
<div class="c1">JUMPING AROUND</div>
<div class="c1">EATING BUSHES</div>

css:

.pi {
    font-size:12px;
    color:#000;
    font-weight:700;
    width:30px;
    height:25px;
    margin-right:10px;
    background:transparent;
    border-bottom:solid 1px black;
}
.c1 {
    border:1px solid blue;
    background:lightskyblue;
    width:200px;
    height:200px;
    float:right;
    margin-right:430px;
    margin-top:-100px;
    color:red;
    font-size:25px;
    text-align:center;
    display:none;
}

javascript:

div = document.getElementsByClassName('c1');
div[0].style.display = 'block'
B = document.getElementsByClassName('pi');
B[0].onmouseover = function () {
    blip(0);
};
B[1].onmouseover = function () {
    blip(1);
};
B[2].onmouseover = function () {
    blip(2);
};
B[3].onmouseover = function () {
    blip(3);
};

function blip(y) {
    div = document.getElementsByClassName('c1');
    for (x = 0; x < (div.length); x++) {
        div[x].style.display = 'none';
    }
    div[y].style.display = 'block';
}

Any help will be greatly appreciated

You've tagged this with jQuery but you don't appear to be using it at all in your JSFiddle example. Are you sure you're looking for a jQuery answer? — James Donnelly, Dec 10 '13 at 09:24
Sorry i thought jquery and javascript is the same lol. sorry for the mistake. but is it possible to do it just by using javascript ? — mrzoxo91, Dec 10 '13 at 09:26
No worries. :) jQuery is a popular JavaScript library available at http://jquery.com. — James Donnelly, Dec 10 '13 at 09:28
Welcome to Stack Overflow. This is a common issue that already has many answers. It's recommended to search before asking. For example, [How to create image slideshow in html?](http://stackoverflow.com/questions/13860671/how-to-create-image-slideshow-in-html) — Boaz, Dec 10 '13 at 09:30

Ringo · Accepted Answer · 2013-12-10T09:38:33.850

1

Try this:

var cur = 0; // current index
setInterval(autoAnim, 2000); // auto change every 2s

function autoAnim(){
    if(cur > 3) cur = 0;
    blip(cur);
    cur++;
}

Here is jsfiddle

edited Dec 10 '13 at 09:38

answered Dec 10 '13 at 09:27

Ringo

3,795
3
22
37

WOW ! thank you ! This works like magic ! haha thank youu very much ! – mrzoxo91 Dec 13 '13 at 02:57

score 0 · Answer 2 · answered Dec 10 '13 at 09:27

0

You can use the function setTimeout to call something after XX miliseconds.

var number=0;
setTimeout(automatic,5000);  // every 5 seconds

function automatic(){
  blip(number);
  number++;
  if (number > 4)
    number=0;
  alert("Hello");
  setTimeout(automatic,5000);
}

You will probably want to make the function sleep when mouse is hover and some others condtions

answered Dec 10 '13 at 09:27

Asenar

6,732
3
36
49

Do you mean `setInterval`? setTimeout does it only once, setInterval continues to execute each N milliseconds.. – Dropout Dec 10 '13 at 09:31
No, I mean `setTimeout` . See the end of the automatic function which run an other setTimeout. But setInterval might be a better choice (as answered by hicurin) – Asenar Dec 10 '13 at 09:33
Sorry, I didn't mean to say that your answer is incorrect, it would work of course, I just wanted to point out that avoiding unnecessary recursion might be a good thing to do. – Dropout Dec 10 '13 at 09:38
hye ! thank you for suggesting your answer yea ! I appreciate it vry much ! – mrzoxo91 Dec 13 '13 at 02:58

How to make images change automatically

2 Answers2