이 기사의 예에서는 jquery의 슬라이드쇼 이미지 전환 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
이것은 jquery를 기반으로 한 슬라이드쇼 이미지 전환 효과 코드로, 썸네일과 제목이 포함되어 있으며 제목을 사용자 정의할 수 있습니다.
작업 렌더링: -----효과 보기 소스 코드 다운로드------------ --------
팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
(1) 헤드 영역에 CSS 스타일을 도입합니다:
<LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen>
(2) js 코드:
<SCRIPT type=text/javascript src="js/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery.easing.1.2.js"></SCRIPT> <SCRIPT type=text/javascript> // <![CDATA[ $(document).ready(function(){ if ($('#pager a').size() <= 1) { $('#pager').css('display', 'none'); return; } var index = 0; var selected = null; var width = 756; $('#pager a').each(function(i){ if (i == 0) { selected = $(this); selected.find('img').attr('src', 'images/button- view-active.gif'); } $(this).click(function(){ index = i; selected.find('img').attr('src', 'images/button- view.gif'); selected = $(this); selected.find('img').attr('src', 'images/button- view-active.gif'); $('#images').animate({left:-(width * i)}, 500, 'easeOutQuad'); return false; }); }); $('#images').wrapInner('<a href="#" id="next"></a>'); $('#next').click(function(){ var a = $('#pager a').get(index + 1); if (!a) a = $('#pager a').get(0); $(a).click(); return false; }); }); // ]]> </SCRIPT>
공유해주신 jquery 슬라이드쇼 사진 전환 효과 코드는 다음과 같습니다
幻灯片图片切换效果 <LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen> <SCRIPT type=text/javascript src="js/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery.easing.1.2.js"></SCRIPT> <SCRIPT type=text/javascript> // <![CDATA[ $(document).ready(function(){ if ($('#pager a').size() <= 1) { $('#pager').css('display', 'none'); return; } var index = 0; var selected = null; var width = 756; $('#pager a').each(function(i){ if (i == 0) { selected = $(this); selected.find('img').attr('src', 'images/button- view-active.gif'); } $(this).click(function(){ index = i; selected.find('img').attr('src', 'images/button- view.gif'); selected = $(this); selected.find('img').attr('src', 'images/button- view-active.gif'); $('#images').animate({left:-(width * i)}, 500, 'easeOutQuad'); return false; }); }); $('#images').wrapInner('<a href="#" id="next"></a>'); $('#next').click(function(){ var a = $('#pager a').get(index + 1); if (!a) a = $('#pager a').get(0); $(a).click(); return false; }); }); // ]]> </SCRIPT>
위 내용은 공유해드린 jquery 슬라이드쇼 이미지 전환 효과 코드입니다. 마음에 드시고 실전에 적용해 보시길 바랍니다.