이 기사의 예에서는 jquery의 페이딩 및 페이딩 사진 슬라이드쇼 전환 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. jQuery 페이드아웃 그림 슬라이드쇼 전환 효과 사이에 다음 코드를 추가하세요. <br> body{font-size:12px;letter-spacing:1px;font-family:"Microsoft YaHei";line-height:1.8em;}<br> div,ul,li{margin:0;padding:0;}<br> .slides{position:relative;width:700px;height:300px;overflow:hidden;border:1px solid #ccc;}<br> .slides img{너비:700px 높이:300px;}<br> .slides .ico{위치:절대; 오른쪽:8px;하단:6px;}<br> .slides .ico li{배경:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid #cecece;font-family:Arial,Helvetica,sans- serif;text-align:center;margin:2px;padding:1px;cursor:pointer;}<br> .slides .ico li.high{배경:#7f0019;색상:#fff;font-weight:bolder;}<br> </스타일><br> <script 언어="javascript" src="js/jquery-1.4.2.min.js"></script><br> <스크립트 언어="javascript"><br> $(함수(){<br> var _img=$('.slides img');<br> var _len=_img.length;<br> var _index=0;<br> var _moving;<br> //이미지 인덱스 번호 삽입<br> var _ul='<ul>'<br> for(var i=1; i _ul=_ul '<li>' 나는 '</li>';<br> }<br> _ul=_ul '</ul>';<br> $('div.ico').append(_ul);<br> var _ico=$('.ico li');<br> //숫자 교차<br> _ico.mouseover(함수(){<br> _index=_ico.index(this);<br> _img.filter(':visible').fadeOut(300,function(){<br> _img.eq(_index).fadeIn(300);<br> })<br> $(this).addClass('high').siblings().removeClass('high');<br> }).eq(0).mouseover();<br> //자동 그라데이션<br> _moving=setInterval(autoShow,2000);<br> _img.hover(function(){clearInterval(_moving)},function(){<br> _moving=setInterval(autoShow,2000);<br> })<br> 함수 autoShow(){<br> _색인 ;<br> if(_index==_len) _index=0;<br> _ico.eq(_index).trigger('mouseover');<br> };<br> });<br> <br> </머리><br> <br> 효과 미리보기 시 왼쪽 하단에 오류가 발생하며, 새로고침을 하면 효과를 볼 수 없습니다. 물론 실제 사용시에는 이런 문제가 발생하지 않습니다. <br><br> <!--<body>와 </body>--><br> 사이에 다음 코드를 추가하세요. <div class="슬라이드"><br> <img src="/images/m02.jpg" title="demo" alt="demo"><br> <img src="/images/m01.jpg" title="demo" alt="demo"><br> <img src="/images/m03.jpg" title="demo" alt="demo"><br> <img src="/images/m04.jpg" title="demo" alt="demo"><br> <img src="/images/m05.jpg" title="demo" alt="demo"><br> <div class="ico"></div><br> </div><br> </본문><br> </div>
