>  기사  >  웹 프론트엔드  >  jQuery는 그림 회전식 슬라이드 효과를 구현합니다.

jQuery는 그림 회전식 슬라이드 효과를 구현합니다.

php中世界最好的语言
php中世界最好的语言원래의
2018-04-24 11:21:142102검색

이번에는 이미지 캐러셀 슬라이드쇼 효과를 구현하기 위해 jQuery를 가져오겠습니다. jQuery를 사용하여 이미지 캐러셀 슬라이드쇼 효과를 구현하는 데 있어 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
(1) 헤드 영역에 CSS 스타일 소개:

<link href="styles/97zzw.css" rel="stylesheet" type="text/css" />

(2) js 코드:

<script src="scripts/jquery.min_v1.0.js" type="text/javascript"></script>
<script src="scripts/slides.min.jquery_v1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $('#slides').slides({
 preload: true,
 preloadImage: 'images/loading.gif',
 play: 5000,
 pause: 2500,
 hoverPause: true,
 fadeSpeed: 350,
 effect: 'fade'
 });
});
</script>

여러분과 공유한 jQuery의 매우 절묘한 사진 캐러셀 슬라이드쇼 특수 효과 코드는 다음과 같습니다



jQuery超精致图片轮播幻灯片特效
<link href="styles/97zzw.css" rel="stylesheet" type="text/css" />


 
 

 

     

  微车   布丁电影票   布丁优惠券   

 

 

  <script src="scripts/jquery.min_v1.0.js" type="text/javascript"></script> <script src="scripts/slides.min.jquery_v1.0.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){  $('#slides').slides({  preload: true,  preloadImage: 'images/loading.gif',  play: 5000,  pause: 2500,  hoverPause: true,  fadeSpeed: 350,  effect: 'fade'  }); }); </script>

완전히 마스터하신 것 같습니다. 이 기사의 사례를 읽은 후 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

jquery 드래그 효과 구현 방법

이미지 연결의 원활한 스크롤을 달성하기 위한 jQuery

위 내용은 jQuery는 그림 회전식 슬라이드 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.