使用onload和图像交换功能的JavaScript幻灯片显示

Question

My slideshow flips through images but one of them flips through the wrong image. Can someone please look through my code and find what I can't seem to find!

Here is the html:

    <div id="serv_tims">
        <div id="serv_d"><img name='slide' src='http://jjoli.weebly.com/uploads/1/8/6/0/18608386/1651756_orig.png'/></div>
        <div id="serv_t"><img name='slide2' src='http://jjoli.weebly.com/uploads/1/8/6/0/18608386/6848746_orig.png'/></div>
        <div id="serv_m"><img name='slide3' src='http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png'/></div>
    </div>

Here is the css:

    #serv_tims{
     border:solid 4px #0276FD;
     height:300px;
     width:300px;
     position:static;
     float:right;
     clear:right;
     margin:0 0.5% 0 0;
    }
    #serv_d,#serv_t,#serv_m{
     height:100px;
     width:300px;
    }

Here is my javascript:

    var i = 0;

    var path = new Array();
    path[0]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/1651756_orig.png";
    path[1]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/6795103_orig.png";
    path[2]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/8269055_orig.png";

    function swapImage(){
       document.slide.src = path[i];
       if(i < path.length - 1){ i++;} else{i = 0;}
       setTimeout("swapImage()",2000);
    }

    var j = 0;

    var path2 = new Array();
    path2[0]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/6848746_orig.png";
    path2[1]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/5983713_orig.png";
    path2[2]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/5808905_orig.png";

    function swapImage2()
    {
       document.slide2.src = path[j];
       if(j < path2.length - 1){ j++;} else{j = 0;}
       setTimeout("swapImage2()",2000);
    }

    var k = 0;

    var path3 = new Array();
    path3[0]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png";
    path3[1]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png";
    path3[2]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png";

    function swapImage3()
    {
       document.slide3.src = path3[k];
       if(k < path3.length - 1){ k++;} else {k = 0;}
       setTimeout("swapImage3()",2000);
    }

    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }

    addLoadEvent(swapImage);
    addLoadEvent(swapImage2);
    addLoadEvent(swapImage3);

Answer 1

Allright I can propose you very simple solution to create your own slideshow
firstly assume that we want to have 5 images in our slide Show .
<div id="main_frame">
<div id="slide_frame">
<div class="imdiv"><img src="1.jpg" class="imgs" /></div>
<div class="imdiv"><img src="2.jpg" class="imgs" /></div>
<div class="imdiv"><img src="3.jpg" class="imgs" /></div>
<div class="imdiv"><img src="4.jpg" class="imgs" /></div>
<div class="imdiv"><img src="5.jpg" class="imgs" /></div>


</div>
</div>

  the most important thing is the frame must be overflow:hidden and for instance your the  width
your each frame is 500px so the width of the mainframe must be 500px and the witdh of slide frame
  must be 500*5=2500px allright

  <style>
  #main_frame {border:1pxsolid;black;width:500px;height:300px;overflow:hidden;position:relative;}
  #slide_frame {border:0px solid transparent;width:2500px;height:300px;position:relative;}
   .imgs {width:500px;border:0px;height:300px;position:relative;}
  </style>

   then you need to have the library of jquery 

   as:

   you will add this library into head tags
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   then write this javascript code
  <script type="text/javascript">
   $(document).ready(function(){
   var slide=500;
   var counter=0;
   setInterval(function(){
   var s=slide*counter;
   $("#slide_frame").animate({left:s},600);
    counter+=1;
    if(counter==5)
    counter=0;

    },500);
     });
   </script>
    add this javascript code declared upward into head tag .you do not need to call it will start
    automatically

      Good Luck

Answer 2

I run your code in a fiddle and this is not an image slide show, those are just text. You shouldnt use those kinda concept with images. It'll only make things messy. Here an example for what youre trying to achieve.

<div id="serv_tims">
  <div>SUNDAY<br>MORNING</div>
  <div>10:00 AM</div>
  <div>GOD<br>LOVES YA</div>
</div>

js:

var i = 1;
var text = [
  ["SUNDAY<br>MORNING","10:00 AM","GOD<br>LOVES YA"],
  ["SUNDAY<br>EVENING","05:00 PM","GOD<br>LOVES YA"],
  ["SUNDAY<br>NIGHT","11:00 PM","GOD<br>LOVES YA"]
];
var st = document.getElementById("serv_tims");

setInterval(function(){
  for(var j = 0; j < 3; j++){
    st.children[j].innerHTML = text[i][j];        
  }
  i = (i < (text.length - 1)) ? (i + 1) : 0;
},3000);

As you can see, you can just edit text array whatever the way you need.

FIDDLE

Answer 3

I see my problem!

document.slide2.src = path[j];

should be

document.slide2.src = path2[j];

Sorry!

Answer 4

  One more thing the code I wrote for you is static.If you want to have new images to your 
  slide shows
  For instance the I wrote was only for 5 images.However you can add more.But in order to do 
  this, you need expand the width of slide_frame when you add a new image every time.And append 
  the image into slide_frame div.If you want further info I can send you a code snippet that I
   had written before



   Good Luck