jQuery解析XML以製作幻燈片

所以我對我的代碼有一個很長的問題。下面是我的要求：jQuery解析XML以製作幻燈片

使用jQuery
XML解析
必須是幻燈片
懸停不透明度，並顯示在潔白完全不透明

文字有了這些片我建立了這個代碼。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js" type="text/javascript" charset="utf-8"></script> 
<style type="text/css" media="screen"> 
    a{text-decoration:none; color:#fff;} 
    .pics img { border:0;} 
    .pics span{display:none;background:#000;position:absolute; height:346px; width:810px;text-align:center; vertical-align:middle;background-color: rgba(0, 0, 0, 0.9); 
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F000000', EndColorStr='#7F000000'); 
    } 
    .pics span p.text {color:#fff;padding:160px 0 0 0;filter: alpha(opacity=100); -khtml-opacity: 1.0; -moz-opacity: 1.0; opacity: 1.0;} 
</style> 
    <script type="text/javascript" charset="utf-8"> 
     $(function(){ 
      $.ajax({ 
       type: "GET", 
       url: "xml/images.xml", 
       dataType: "xml", 
       success: function(xml) { 
        $(xml).find("image").each(function(n) //finds each image in the xml 
       { 
       var path = $(this).attr("path");//path to the image from the xml 
       var picURL = $(this).attr("picURL");//picture link url 
       var picDesc = $(this).attr("picDesc");//pic description 
       //this appends the images to the slide show from the xml 
       $("#slideshow").append('<a id="'+n+'" href="' + picURL + '"><span class="desc"><p class="text">'+picDesc+'</p></span><img src="' + path + '"/></a>'); 
       //this is the hover function to show the text 
       $('a:has(span)').hover(function(){if(this.id == '0'){$('span',this).stop().fadeIn();};$('span', this).fadeIn();},function(){$('span', this).stop(true, false).fadeOut();});  
      }); 
       $('#slideshow').cycle({fx: 'fade'}); 
       } 
       }); 
}); 
    </script> 
</head> 
<body> 
    <div id="slideshow" class="pics"></div> 
</body> 
</html>

這裏是XML的配合。

<imageList timer="4" fadeTime="1.2" newWindow="false" loaderColor="0x333333" loaderAlpha="0" loaderPosition="bottom" allowLinks="true" randomLoad="false"> 

<image path="images/slide01.jpg" picURL="" picDesc=""/> 
<image path="images/slide02.jpg" picURL="/gallery/glamour_neons" picDesc="G L A M O U R"/> 
<image path="images/slide03.jpg" picURL="/gallery/time_manny" picDesc="T I M E M A G A Z I N E "/> 
</imageList>

所以你可以看到我使用jquery週期爲便於與圖像中使用的，它可以很容易地改變，如果客戶端請求，但因爲我有一個setTimeout的等待一切推到頁面然後啓動循環插件。一個更好的方法來做到這一點將是非常棒的。也是我似乎需要幫助的是這不是100％完美的功能。我似乎無法讓代碼更清潔。任何對乾淨和完美執行的代碼的幫助都會很棒。

來源

2010-09-28 Casey Becking

不要使用setTimeout，任意500毫秒，好，隨心所欲，如此循環插件不能保證工作。

爲什麼你不在Ajax success處理程序的末尾實例化插件？

來源

2010-09-28 23:06:38

非常感謝你對上面的代碼提出了這些機會 – 2010-09-29 14:56:17

jQuery解析XML以製作幻燈片

回答

相關問題