更改JS代碼，使圖像幻燈片

Question

我需要幫助實現幻燈片的幻燈片功能，我已經完成了大部分工作，從教程開始，並在jQuery網站上瀏覽很多，但現在我卡住，需要幫助。

我想實現兩件事，一是讓圖片從右向左滑動，但第一張圖片不能滑入，但保持放置狀態，但所有其他圖片都會滑動。

我在底部有一個標題，我知道如何顯示和隱藏文字，但不是彩色div，基本上我的目標是有一個標題/頁腳顯示鏈接在最後一張幻燈片，該幻燈片在特定的幻燈片上會保留一段時間，但如果這不是很好，因爲前兩個請求對我來說最重要。

• JS小提琴鏈接： http://jsfiddle.net/8bBYu/

預先感謝您，下面是JavaScript代碼。

/* 
* Author:  Marco Kuiper (http://www.marcofolio.net/) 
*/ 

// Speed of the automatic slideshow 
var slideshowSpeed = 6000; 

// Variable to store the images we need to set as background 
// which also includes some text and url's. 
var photos = [ { 
     "title" : "Stairs", 
     "image" : "vacation.jpg", 
     "url" : "http://www.sxc.hu/photo/1271909", 
     "firstline" : "Dubstep is a genre of electronic dance music", 
     "secondline" : "" 
    }, { 
     "title" : "Office Appartments", 
     "image" : "work.jpg", 
     "url" : "http://www.sxc.hu/photo/1265695", 
     "firstline" : "Or still busy at", 
     "secondline" : "work?" 
    }, { 
     "title" : "", 
     "image" : "biking.jpg", 
     "url" : "http://www.sxc.hu/photo/1221065", 
     "firstline" : "Get out and be", 
     "secondline" : "active" 
    }, { 
     "title" : "", 
     "image" : "nature.jpg", 
     "url" : "http://www.sxc.hu/photo/1271915", 
     "firstline" : "Take a fresh breath of", 
     "secondline" : "nature" 
    }, { 
     "title" : "Italian pizza", 
     "image" : "food.jpg", 
     "url" : "http://www.sxc.hu/photo/1042413", 
     "firstline" : "Enjoy some delicious", 
     "secondline" : "food" 
    } 
]; 



$(document).ready(function() { 

    // Backwards navigation 
    $("#back").click(function() { 
     stopAnimation(); 
     navigate("back"); 
    }); 

    // Forward navigation 
    $("#next").click(function() { 
     stopAnimation(); 
     navigate("next"); 
    }); 

    var interval; 
    $("#control").toggle(function(){ 
     stopAnimation(); 
    }, function() { 
     // Change the background image to "pause" 
     $(this).css({ "background-image" : "url(images/btn_pause.png)" }); 

     // Show the next image 
     navigate("next"); 

     // Start playing the animation 
     interval = setInterval(function() { 
      navigate("next"); 
     }, slideshowSpeed); 
    }); 


    var activeContainer = 1;  
    var currentImg = 0; 
    var animating = false; 
    var navigate = function(direction) { 
     // Check if no animation is running. If it is, prevent the action 
     if(animating) { 
      return; 
     } 

     // Check which current image we need to show 
     if(direction == "next") { 
      currentImg++; 
      if(currentImg == photos.length + 1) { 
       currentImg = 1; 
      } 
     } else { 
      currentImg--; 
      if(currentImg == 0) { 
       currentImg = photos.length; 
      } 
     } 

     // Check which container we need to use 
     var currentContainer = activeContainer; 
     if(activeContainer == 1) { 
      activeContainer = 2; 
     } else { 
      activeContainer = 1; 
     } 

     showImage(photos[currentImg - 1], currentContainer, activeContainer); 

    }; 

    var currentZindex = -1; 
    var showImage = function(photoObject, currentContainer, activeContainer) { 
     animating = true; 

     // Make sure the new container is always on the background 
     currentZindex--; 

     // Set the background image of the new active container 
     $("#headerimg" + activeContainer).css({ 
      "background-image" : "url(images/" + photoObject.image + ")", 
      "display" : "block", 
      "z-index" : currentZindex 
     }); 

     // Hide the header text 
     $("#headertxt").css({"display" : "none"}); 

     // Set the new header text 
     $("#firstline").html(photoObject.firstline); 
     $("#secondline") 
      .attr("href", photoObject.url) 
      .html(photoObject.secondline); 
     $(".pictureduri") 
      .attr("href", photoObject.url) 
      .html(photoObject.title);  

     // Fade out the current container 
     // and display the header text when animation is complete 
     $("#headerimg" + currentContainer) .toggle('slow', function() { 
      setTimeout(function() { 
       $("#headertxt").css({"display" : "block"}); 
       animating = false; 
      }, 2000); 
     }); 
    }; 





    var stopAnimation = function() { 
     // Change the background image to "play" 
     $("#control").css({ "background-image" : "url(images/btn_play.png)" }); 

     // Clear the interval 
     clearInterval(interval); 
    }; 

    // We should statically set the first image 
    navigate("next"); 

    // Start playing the animation 
    interval = setInterval(function() { 
     navigate("next"); 
    }, slideshowSpeed); 

}); 

Answer 1

您可能會更好地查看一個UI框架，如jQuery Tools Scrollable。

http://flowplayer.org/tools/scrollable/

它寫得很好，並有一個可定製的API，當你調用$（「＃選擇」）。數據（「滾動」）