Node.js는 키보드 제어_javascript 기술에서 왼쪽 및 오른쪽 전환 3차원 이미지 회전식 효과 코드 공유를 지원합니다.-JS 튜토리얼-php.cn

Node.js는 키보드 제어_javascript 기술에서 왼쪽 및 오른쪽 전환 3차원 이미지 회전식 효과 코드 공유를 지원합니다.

WBOY

풀어 주다： 2016-05-16 15:42:28

원래의

1402명이 탐색했습니다.

이 글의 예시에서는 js가 키보드 제어를 지원하는 좌우 전환 3차원 그림 캐러셀 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
키보드 제어를 지원하는 좌우 전환을 지원하는 JavaScript 기반의 3차원 이미지 캐러셀 효과입니다. 특히 3차원 효과가 가장 중요한 것은 키보드를 사용하여 제어할 수 있다는 것입니다.
기능 소개:
1. 슬라이드쇼의 너비를 쉽게 변경할 수 있습니다.
2. 다음에 표시되는 사진 개수를 쉽게 변경할 수 있습니다.
3. 마지막 사진이 첫 번째 사진으로 되돌아갑니다.
4. Fancy 보기 플러그인이 내장되어 있으며, 각 사진마다 자세한 사진 정보를 보실 수 있습니다.

运行效果图： ------查看效果下载源码--------- ----------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
키보드로 제어되는 좌우 전환 3차원 이미지 캐러셀 효과를 지원하는 공유된 js 코드는 다음과 같습니다

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>支持键盘控制的左右切换立体式图片轮播效果</title>
<link type="text/css" href="css/fancymoves.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/slider.js"></script>
<link type="text/css" href="css/jiaobenzhijia.css" rel="stylesheet" />
<script src="js/lanrenzhijia.js"></script>
<!--图片查看插件 FancyBox 的javascript -->
<script src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" />
<script>
 $(document).ready(function () {
 $("a.pop1").fancybox();

 $("a.pop2").fancybox({
 'overlayShow': false,
 'transitionIn': 'elastic',
 'transitionOut': 'elastic'
 });

 $("a.pop3").fancybox({
 'transitionIn': 'none',
 'transitionOut': 'none',
 'overlayColor': '#000',
 'overlayOpacity': 0.7
 });

 $("a.pop4").fancybox({
 'opacity': true,
 'overlayShow': false,
 'transitionIn': 'elastic',
 'transitionOut': 'none'
 });

 $("a.pop5").fancybox();

 $("a#example6").fancybox({
 'titlePosition': 'outside',
 'overlayColor': '#000',
 'overlayOpacity': 0.9
 });

 $("a.pop6").fancybox({
 'titlePosition': 'inside'
 });

 $("a.pop7").fancybox({
 'titlePosition': 'over'
 });

 });
 </script>
</head>
<body>
<div id="wrapper">
 <div id="slider-one">
 <div> <img src="images/img1.jpg" />
 <p> one hundred<br />
 <a class="pop1" href="images/1-2.jpg" rel="group1" title="详细图片文字描述1">查看详细图片</a> <a class="pop1" href="images/1-3.jpg" rel="group1" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img2.jpg" />
 <p> math problem<br />
 <a class="pop2" href="images/2-2.jpg" rel="group2" title="详细图片文字描述1">查看详细图片</a> <a class="pop2" href="images/2-3.jpg" rel="group2" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img3.jpg" />
 <p> better than i deserve<br />
 <a class="pop3" href="images/3-2.jpg" rel="group3" title="详细图片文字描述1">查看详细图片</a> <a class="pop3" href="images/3-3.jpg" rel="group3" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img4.jpg" />
 <p> seven days a week<br />
 <a class="pop4" href="images/4-2.jpg" rel="group4" title="详细图片文字描述1">查看详细图片</a> <a class="pop4" href="images/4-3.jpg" rel="group4" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img5.jpg" />
 <p> path to nowhere<br />
 <a class="pop5" href="images/5-2.jpg" rel="group5" title="详细图片文字描述1">查看详细图片</a> <a class="pop5" href="images/5-3.jpg" rel="group5" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img6.jpg" />
 <p> and then i woke up<br />
 <a class="pop6" href="images/6-2.jpg" rel="group6" title="详细图片文字描述1">查看详细图片</a> <a class="pop6" href="images/6-3.jpg" rel="group6" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img7.jpg" />
 <p> it's about time<br />
 <a class="pop7" href="images/7-2.jpg" rel="group7" title="详细图片文字描述1">查看详细图片</a> <a class="pop7" href="images/7-3.jpg" rel="group7" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img8.jpg" />
 <p> two are better than one<br />
 <a class="pop2" href="images/8-2.jpg" rel="group8" title="详细图片文字描述1">查看详细图片</a> <a class="pop2" href="images/8-3.jpg" rel="group8" title="详细图片文字描述2"></a> </p>
 </div>
 <div> <img src="images/img9.jpg" />
 <p> lowercase<br />
 <a class="pop2" href="images/9-2.jpg" rel="group9" title="详细图片文字描述1">查看详细图片</a> <a class="pop2" href="images/9-3.jpg" rel="group9" title="详细图片文字描述2"></a> </p>
 </div>
 </div>
</div>
</body>
</html>

로그인 후 복사

위 내용은 여러분께 공유해 드린 js 마우스 클릭 이미지 전환 효과 코드입니다.