更改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，当你调用$（“＃选择”）。数据（“滚动”）