제이쿼리(jQuery) 이미지 슬라이드쇼

제이쿼리(jQuery) 이미지 슬라이드쇼

jQuery를 이용한 이미지 슬라이드쇼 입니다. 어느정도 기본적인 테그 사용법만 아셔도 손쉽게 수정 사용 하실 수 있습니다. 화려한 이미지 슬라이드쇼는 아니지만 손십게 소스를 수정 사용할 수 있다는 것이 장점 같네요. jQuery 슬라이드쇼의 모든소스를 압축파일로 다운 받으실 수 있습니다.


제이쿼리(jQuery) 이미지 슬라이드쇼


데모페이지 에서 어떻게 출력되는지 살펴보시고 상세 설정방법 으로 이동하시면 자세한 설정 방법과 데모 소스를 압축 파일로 다운 받을 수 있습니다.


아래는 데모소스의 일부분입니다. 별로 어려워보이지도 않죠~~ 텍스트 부분과 링크그리고 이미지 정도만 수정 하셔도 바로 사용할 수 있겠죠~~


   <!-- Slideshow HTML -->
  <div id="slideshow">
   <div id="slidesContainer">
     <div class="slide">
       <h2>Web Development Tutorial</h2>
       <p><a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/"><img src="img/img_slide_01.jpg" alt="An image that says Install X A M P P for wordpress." width="215" height="145" /></a>If you're into developing web apps, you should check out the tutorial called "<a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/">Using XAMPP for Local WordPress Theme Development</a>" which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!</p>
     </div>
     <div class="slide">
       <h2>Grunge Brushes, Anyone?</h2>
       <p><a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/"><img src="img/img_slide_02.jpg" width="215" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>In this layout, I used <a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/">SR Grunge</a>, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.</p>
       <p>
     </div>
     <div class="slide">
       <h2>How About Some Awesome Grunge Textures?</h2>
       <p><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="img/img_slide_03.jpg" width="215" height="145" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a>The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p>
       <p>You can head over to the <a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/">Grunge Extreme</a> page to download the texture set or check out Six Revisions' <a href="http://sixrevisions.com/category/freebies/">freebie section</a> for even more goodies!</p>
     </div>
     <div class="slide">
       <h2>'Tis the End, My Friend.</h2>
       <p><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/"><img src="img/img_slide_04.jpg" width="215" height="145" alt="Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril." /></a>This is the last slide. Hit the left arrow control to go back to the other slides.</p>
       <p>Alternatively, you may want to check out the tutorial on how to create a simple and cool button in Photoshop called &quot;<a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/">How to Create a Slick and Clean Button in Photoshop</a>&quot; which was inspired by the <a href="http://www.campaignmonitor.com/designer/?utm_source=sixrevisions&amp;utm_medium=banner&amp;utm_term=2&amp;utm_content=0003&amp;utm_campaign=Apr09Banners">Campaign Monitor</a> web interface.</p>
     </div>
   </div>
  </div>
  <!-- Slideshow HTML -->

 관련 게시물 

플래시 포토 갤러리 23가지 모음


©꿈속으로(mongri.net), 무단전재 및 재배포 금지. 공유와 직접 링크를 선호합니다.
[저작권 규약, 운영 원칙 및 이용자 준수 사항]