이미지 슬라이드 쇼 스크립트

Question

이미지를 슬라이드 쇼로 표시하고 싶습니다. 모든 이미지에 대한 링크와 제목이 있습니다.

이미지를 반복 할 때 이미지 링크와 제목도 적절히 변경되기를 바랍니다.

어떻게하면됩니까?

Answer 1

이를 사용할 수 있습니다 http://jquery.malsup.com/cycle/

자바 스크립트가 이것에 대한 PHP보다 낫다.

Answer 2

슬라이드 쇼를 만들 때 PHP를 사용할 수 없습니다. 당신은 슬라이드 쇼를 만들기 위해 자바 스크립트를 사용합니다. 이 링크 밖으로

확인 :

http://jquery.malsup.com/cycle/

날 슬라이드 쇼

HTML

<div id="slideshow"> 
    <img src="img/img1.jpg" alt="" class="active" /> 
    <img src="img/img2.jpg" alt="" /> 
    <img src="img/img3.jpg" alt="" /> 
</div> 

CSS

#slideshow { 
    position:relative; 
    height:350px; 
} 

#slideshow IMG { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:8; 
} 

#slideshow IMG.active { 
    z-index:10; 
} 

#slideshow IMG.last-active { 
    z-index:9; 
} 

에게 페이딩 당신에게 간단한 jQuery를 줘 보자

일부 JQuery

function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 

    if ($active.length == 0) $active = $('#slideshow IMG:last'); 

    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 

오! 예, jquery 라이브러리를 가져 오는 것을 잊지 마십시오.