转换包含图像标记li元素一个div到幻灯片

Question

我有标记，看起来像这样

<div class="myDiv"><ul> 
<li><img src="img1.jpg"/></li> 
<li><img src="img1.jpg"/></li> 
. 
. 
. 
</ul></div>

我需要这个网站转换成幻灯片。我不擅长使用javascript或jquery。我只需要一些能够让我通过div类的东西，然后列表中的所有图像将转换为简单的幻灯片。由于事前

Answer 1

你好，请试试这个演示http://jsfiddle.net/NPcDH/||http://jsfiddle.net/rQS6h/也许&进一步从下面的评论你的个人页面的演示是在这里 - http://jsfiddle.net/2wnws/2/show/

它使用锂休息，你可以看到它是如何工作的jsfiddle一个简单的幻灯片。请让我知道，如果我错过了什么。

HTML

<div id="slideshow"> 

    <ul> 

     <li class="slideshow_item"> 

      <a href="#"><img src="http://www.google.com/logos/2011/persiannewyear11-hp.jpg" alt="persiannewyear11-hp" /></a> 

     </li> 

     <li class="slideshow_item"> 

      <a href="#"><img src="http://www.google.com/logos/2011/holi11-hp.jpg" alt="holi11-hp" /></a> 

     </li> 

     <li class="slideshow_item"> 

      <a href="#"><img src="http://www.google.com/logos/2011/sayeddarwish11-hp.jpg" alt="sayeddarwish11-hp" /></a> 

     </li> 

     <li class="slideshow_item"> 

      <a href="#"><img src="http://www.google.com/logos/2011/okamoto11-hp.jpg" alt="okamoto11-hp" /></a> 

     </li> 

     <li class="slideshow_item"> 

      <a href="#"><img src="http://www.google.com/logos/2011/eisner11-hp.jpg" alt="eisner11-hp" /></a> 

     </li> 

     <li class="slideshow_item"> 

      <a href="#"><img src="http://www.google.com/logos/2011/jfkinaugural11-hp.jpg" alt="jfkinaugural11-hp" /></a> 

     </li> 

    </ul> 

</div> ​ 

Jquery的

/* home slide show */ 

var slide_pos = 0; 
var slide_len = 0; 

$(document).ready(function() { 

    slide_len = $(".slideshow_item").size() - 1; 

    $(".slideshow_item:gt(0)").hide(); 

    slide_int = setInterval(function() { 

     slide_cur = $(".slideshow_item:eq(" + slide_pos + ")"); 
     slide_cur.fadeOut(2000); 

     slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1)); 

     slide_cur = $(".slideshow_item:eq(" + slide_pos + ")"); 
     slide_cur.fadeIn(2000); 

    }, 5000); 

});​ 

CSS

#slideshow{ 

    position:relative; 
    top:0; 
    left:0; 

} #slideshow ul, #slideshow li{ 

    margin:0; 
    padding:0; 
    list-style-type:none; 

} .slideshow_item{ 

    position:absolute; 
    left:0; 
    top:0; 
    list-style-type:none; 

} .slideshow_item img{ 

    margin:0; 
    padding:0; 
    vertical-align:bottom; 

} ​