Simple slideshow

This is a simple example of a JavaScript slideshow animation effect using JQuery. Simple token string: YP3JJP2EWE53

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<style>

#slideshow img {

opacity: 0;

filter: alpha(opacity = 0);

position: absolute;

}

#slideshow img.current {

opacity: 1;

filter: alpha(opacity = 100);

} 

</style>

<div id="slideshow">

<img src="img/demo/img1.jpg" alt="image 1" class="current" />

<img src="img/demo/img2.jpg" alt="image 2" />

<img src="img/demo/img3.jpg" alt="image 3" />

</div>

<script type="text/javascript">

function shoot(id,interval) {

var slider=$('#'+id);

var current=slider.find(".current");

if (current.is(":last-child")) {var next=slider.find("img").first();}

else {var next=current.next("img"); }

current.animate({opacity: 0}

, {duration:interval,

step: function(now,fx) {next.css("opacity",1-now);},

complete:function() { current.removeClass("current");

current.css("opacity","");

next.addClass("current");

shoot(id,interval); }

}

);

}

 

// 3000 (miliseconds) is the timeout between image changes

 

shoot("slideshow",3000);

</script>

Newsletter

Sign up for inspiration, news and updates