如何在javascript中製作幻燈片

-2

我試圖用這些圖像製作幻燈片：每當我嘗試此操作時，它都卡在第一張圖像上。如何在javascript中製作幻燈片

<div id="slideshow"> 
    <a href="../images/food/e_chicken_quesa.jpg" target="_blank"><img class="show" src="../images/food/chicken_quesa.jpg" alt="Chicken Quesadilla" title="Chicken Quesadilla"></a> 
    <a href="../images/food/e_steak.jpg" target="_blank"><img src="../images/food/steak.jpg" alt="Beef Tenderloin" title="Beef Tenderloin"></a> 
    <a href="../images/food/e_pasta_display.jpg" target="_blank"><img src="../images/food/pasta_display.jpg" alt="Pasta Station" title="Pasta Station"></a> 
    <a href="../images/food/e_salmon.jpg" target="_blank"><img src="../images/food/salmon.jpg" alt="Salmon Filet" title="Salmon Filet"></a> 
    <a href="../images/food/e_panacotta.jpg" target="_blank"><img src="../images/food/panacotta.jpg" alt="Panacotta" title="Panacotta"></a> 
    <a href="../images/food/e_beet_salad.jpg" target="_blank"><img src="../images/food/beet_salad.jpg" alt="Beet Salad" title="Beet Salad"></a> 
    <a href="../images/food/e_tuna.jpg" target="_blank"><img src="../images/food/tuna.jpg" alt="Seared Tuna" title="Seared Tuna"></a> 
    <a href="../images/food/e_foi_gras.jpg" target="_blank"><img src="../images/food/foi_gras.jpg" alt="Foi Gras" title="Foi Gras"></a> 
</div>

我不知道什麼部分的代碼搞亂了，但它在這裏。的Javascript：

<script type="text/javascript">  
     var hovering = false; 
     var slideshow = $("#slideshow"); 

     slideshow.mouseenter(function() { 
      hovering = true; 
     }).mouseleave(function() { 
      hovering = false; 
      slideShow(); 
     }); 
     function slideShow() { 
      if (!hovering) { 
       var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first"); 
       var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first"); 

       currentImg.delay(1000).fadeOut(500, function() { 
        nextImg.fadeIn(500, function() { 
         setTimeout(slideShow, 1000); 
        }); 
       }); 
      } 
     } 
     $(document).ready(function() { 
      slideShow(); 
     }); 
     </script>

來源

2013-03-13 Garrett Johnson

這可能有助於顯示實際的JavaScript。 – 2013-03-13 19:29:45

_Whenever I try this_ - 你在想什麼？發佈相關的腳本代碼。 – 2013-03-13 19:30:19

對不起>。> – 2013-03-13 19:48:39

使用cycle.js http://jquery.malsup.com/cycle/

$('#slideshow').cycle();

來源

2013-03-13 19:31:20 superUntitled

<html> 
<head> 

<!-- You can load the jQuery library from the Google Content Network. 
Probably better than from your own server. --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<!-- Load the CloudCarousel JavaScript file --> 
<script type="text/JavaScript" src="cloud-carousel.1.0.5.js"></script> 

<script> 
$(document).ready(function(){ 

    // This initialises carousels on the container elements specified, in this case, carousel1. 
    $("#carousel1").CloudCarousel(  
     {   
      xPos: 128, 
      yPos: 32, 
      buttonLeft: $("#left-but"), 
      buttonRight: $("#right-but"), 
      altBox: $("#alt-text"), 
      titleBox: $("#title-text") 
     } 
    ); 
}); 

</script> 

</head> 
    <body> 
     <!-- This is the container for the carousel. --> 
     <div id = "carousel1" style="width:1000px; height:700px;background:#000;overflow:scroll;">    
      <!-- All images with class of "cloudcarousel" will be turned into carousel items --> 
      <!-- You can place links around these images --> 
      <img class = "cloudcarousel" src="images/Chrysanthemum.jpg" alt="Flag 1 Description" title="Flag 1 Title" /> 
      <img class = "cloudcarousel" src="images/Desert.jpg" alt="Flag 2 Description" title="Flag 2 Title" /> 
      <img class = "cloudcarousel" src="images/Hydrangeas.jpg" alt="Flag 3 Description" title="Flag 3 Title" /> 
      <img class = "cloudcarousel" src="images/Koala.jpg" alt="Flag 4 Description" title="Flag 4 Title" /> 
     </div> 

     <!-- Define left and right buttons. --> 
     <input id="left-but" type="button" value="Left" /> 
     <input id="right-but" type="button" value="Right" /> 

     <!-- Define elements to accept the alt and title text from the images. --> 
     <p id="title-text"></p> 
     <p id="alt-text"></p> 
    </body> 
</html>

來源

2013-03-13 19:32:19 Biswajit

有很多花哨的重量輕的圖像幻燈片jQuery的可用插件。檢查
http://wowslider.com/rq/jquery-images-slider/
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

來源

2013-03-13 19:38:40 suren

如何在javascript中製作幻燈片

回答

相關問題