javascript slideshow without jquery

Question

I cant find an example of what I am looking for -

I need a javascript slideshow that works WITHOUT jquery. What the slideshow needs to do is display images, one by one (it would be nice if there would be a fading animation), and each image would be a link to another page. It is important that jquery is not used, because I am having some problems with that. I dont want any controls such as pause next... or any captions. Just <a> <img/> </a>

nothing, I have been using jquery but although it works, that messes up some other stuff that use jquery this is what I used... http://jquery.malsup.com/cycle/basic.html — Dejan Biljecki, Jun 26 '12 at 00:26
You can't find an example under a rock, use [**Google**](http://www.google.com/search?q=JavaScript+slideshow). — arttronics, Jun 26 '12 at 00:26
I have used google, alot of the stuff I have seen do not work for me... either jquery is used or controls I cant disable etc etc — Dejan Biljecki, Jun 26 '12 at 00:29
View the first [**Google**](http://www.google.com/search?q=pure+JavaScript+image) hit for the search phrase *pure JavaScript image*. Example: [**Javascript Image Slider - No jQuery**](http://www.menucool.com/javascript-image-slider). P.S. The free version lacks thumbnails and video feature, but great for images. — arttronics, Jun 26 '12 at 00:40

score 3 · Accepted Answer · answered Mar 29 '14 at 04:31

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>JavaScript Fade - Brugbart Example</title>
    <style type="text/css">
#Slideshow {
  opacity: 1.0;              /* CSS3 */
  -moz-opacity: 1.0;         /* Older versions of Firefox */
  -khtml-opacity: 1.0;       /* Older versions of Safari */
  filter: alpha(opacity=100); /* Internet Explorer */
}
#Slideshow div {display:none;}
#Slideshow #slice1 {display:block;}
div{font-family: arial, sans-serif}

div{font-size:50px}
    </style>
  </head>

  <body>
   <div id="Basement" style="width:90%;margin:auto;">
    <div id="Slideshow">
      <div id="slice1">111111
      </div>
      <div id="slice2">222222
      </div>
      <div id="slice3">333333
      </div>
    </div>
   </div>

<script type="text/javascript">



    /* Creted with a reference from http://brugbart.com/slideshow-fade-javascript */

    var duration = 250; /* fade duration in millisecond */
    var hiddentime = 250; /* time to stay hidden */
    var showtime = 1000; /* time to stay visible */

    var active = 0 /* Used to check if fade is active */
    var iEcount = 0 /* Element Counter */

    var element = document.getElementById("Slideshow");

    var iEarray = element.getElementsByTagName('div');
    var iEtotal = iEarray.length;

    StartFade();
    function StartFade()
    { 
        iEcount = 1;
        setTimeout("FadeOut()", showtime);
    }

    function FadeOut()
    {
        for (i = 0; i <= 1; i += 0.01)
        {
            setTimeout("SetOpa(" + (1 - i) +")", i * duration);
        }
        setTimeout("FadeIn()", (duration + hiddentime));
    }

    function FadeIn()
    {
        for (i = 0; i <= 1; i += 0.01)
        {
            setTimeout("SetOpa(" + i +")", i * duration);
        }
        if (iEcount == iEtotal)
        {
            iEcount = 1
            document.getElementById("slice" + iEcount).style.display = "block";
            document.getElementById("slice" + iEtotal).style.display = "none";
        }
        else
        {
            document.getElementById("slice" + (iEcount + 1)).style.display = "block";
            document.getElementById("slice" + iEcount).style.display = "none";
            iEcount = iEcount+1
        }
        setTimeout("FadeOut()", (duration + showtime));
    }
    function SetOpa(Opa)
    {
        element.style.opacity = Opa;
        element.style.MozOpacity = Opa;
        element.style.KhtmlOpacity = Opa;
        element.style.WebkitOpacity = Opa;
        element.style.KhtmlOpacity = Opa;
        element.style.MsOpacity = Opa;
        element.style.width = "500px";
        element.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
    }

</script>

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

I would look at the answers here posted May 25, 2012. Similar questions have been asked many times. It helps to search for answers that have been already answered.

I have currently implemented just what you are trying to do. Very similar to what is in the post I linked to.

edited May 23 '17 at 12:22

Community

1
1

answered Nov 25 '13 at 04:55

abalter

9,663
17
90
145

javascript slideshow without jquery

2 Answers2