使用onload和圖像交換功能的JavaScript幻燈片顯示

Question

我的幻燈片顯示會翻轉圖像，但其中之一會翻轉錯誤的圖像。 有人可以瀏覽我的代碼，找到我似乎找不到的東西！

這是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>

這是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;
    }

這是我的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

我在小提琴中運行您的代碼，這不是圖像幻燈片，而是純文本。 您不應該在圖像中使用那些概念。 它只會使事情變得混亂。 這是您想要實現的示例。

<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);

如您所見，您可以隨意編輯text數組。

小提琴

Answer 3

我明白了我的問題！

document.slide2.src = path[j];

應該

document.slide2.src = path2[j];

抱歉!

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