슬라이드 쇼

Question

에 이미지 태그를 포함하는 리튬 요소 사업부 변환 나는이

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

내가 슬라이드 쇼이 html로 변환해야처럼 보이는 마크 업을 가지고있다. 나는 javascript 나 jquery를 잘 사용하지 않는다. div의 클래스를 전달할 수있는 무언가가 필요하면 목록의 모든 이미지가 간단한 슬라이드 쇼로 변환됩니다. 감사합니다.

Answer 1

히야이 시도해주세요. 데모http://jsfiddle.net/NPcDH/|| http://jsfiddle.net/2wnws/2/show/

의이 jsfiddle에서 작동하는 방법 당신이 볼 수있는 리튬 나머지를 사용하여 간단한 슬라이드 쇼 -http://jsfiddle.net/rQS6h/ 아마도 아래에서 더 & 개인 페이지 데모는 여기에 코멘트. 내가 무엇이든 놓친다면 알려줘.

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; 

} ​