집 >웹 프론트엔드 >JS 튜토리얼 >Node.js 이미지 캐러셀 특수 효과 코드 공유_javascript 기술

Node.js 이미지 캐러셀 특수 효과 코드 공유_javascript 기술

WBOY원래의: 2016-05-16 15:40:191404검색

본 글의 예시는 js 이미지 캐러셀 효과에 대한 설명으로, 참고용으로 공유하고자 합니다. 세부 내용은 다음과 같습니다.
이것은 자바스크립트를 기반으로 한 사진 캐러셀 특수 효과 코드입니다. 썸네일과 제목이 있으며 제목을 사용자 정의할 수 있습니다.
렌더링 실행: ---------------------------------- ------------------------------------- ---------------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.

공유해주신 js 이미지 캐러셀 특수효과 코드는 다음과 같습니다

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片轮播特效</title>
<link rel="stylesheet" type="text/css" href="common.css" />
<link href="zixun.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>

<!--焦点图 js-->
<script src="zhanlan_qh.js" type="text/javascript"></script>
</head>

<body>
<style>
ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}
ul#bcty365_nav li{float:left; display:inline; margin:10px;}
ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;}
ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微软雅黑";}
ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;}
</style> 


<!--焦点图-->
 <div class="newtu">
   <div id="inner3">
  <div class="hot-event3">
   <div class="switch-nav3">
    <a href="#" onclick="return false;" class="prev">
     <i class="ico i-prev"></i>
    </a>
    <a href="#" onclick="return false;" class="next">
     <i class="ico i-next"></i>
    </a>  
   </div>
   <div class="event-item3" style="display: block;">
    <a target="_blank" href="#" class="banner">
     <img src="img_01.jpg"/>
    </a>
    <p></p>
    <h2><a target="_blank" href="#">盛华厚：得天独"厚"的多面</a></h2>
   </div>
   <div class="event-item3" style="display: none;">
    <a target="_blank" href="#" class="banner">
     <img src="img_02.jpg" />
    </a>
    <p></p>
    <h2><a target="_blank" href="#">2盛华厚：得天独"厚"的多面</a></h2>
   </div>
   <div class="event-item3" style="display: none;">
    <a target="_blank" href="#" class="banner">
     <img src="img_03.jpg" />
    </a>
    <p></p>
    <h2><a target="_blank" href="#">3盛华厚：得天独"厚"的多面</a></h2>
   </div>
   <div class="event-item3" style="display: block;">
    <a target="_blank" href="#" class="banner">
     <img src="img_01.jpg"/>
    </a>
    <p></p>
    <h2><a target="_blank" href="#">盛华厚：得天独"厚"的多面</a></h2>
   </div>
   <div class="switch-tab3">
    <a href="#" onclick="return false;" class="current3"><img src="img_01.jpg"/></a><a href="#" onclick="return false;"><img src="img_02.jpg"/></a><a href="#" onclick="return false;"><img src="img_03.jpg"/></a><a href="#" onclick="return false;"><img src="img_01.jpg"/></a>
   </div>
  </div>
  <script type="text/javascript">
  $('#inner3').nav3({ t: 4000, a: 1000 });//参数t:是间隔轮换时间，参数a:是轮换所需要时间
  </script>
 </div>
  </div>
 

</body>
</html>

위 내용은 공유해드린 자바스크립트 이미지 캐러셀 특수효과 코드입니다. 마음에 드시고 실무에 적용해보시길 바랍니다.

성명：

이전 기사：jquery는 슬라이드 아웃 탐색 슬라이드 아웃 메뉴 효과를 구현합니다.다음 기사：jquery는 슬라이드 아웃 탐색 슬라이드 아웃 메뉴 효과를 구현합니다.

Node.js 이미지 캐러셀 특수 효과 코드 공유_javascript 기술

관련 기사