js supports left and right switching three-dimensional image carousel effect code sharing under keyboard control

js supports left and right switching three-dimensional image carousel effect code sharing under keyboard control_javascript skills

WBOY

Release： 2016-05-16 15:42:28

Original

1364 people have browsed it

The example in this article describes the left and right switching three-dimensional picture carousel effect that js supports keyboard control. Share it with everyone for your reference. The details are as follows:
This is a three-dimensional image carousel effect based on JavaScript that supports left and right switching that supports keyboard control. It has a particularly three-dimensional effect. The most important thing is that it can be controlled using the keyboard.
Feature introduction:
1. Easily change the width of the slideshow.
2. Easily change the number of pictures displayed next.
3. The last picture will loop back to the first picture.
4. The Fancy viewing plug-in is embedded, and detailed picture information can be viewed on each picture.

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

Tips: If the browser does not work properly, you can try switching the browsing mode.
The js code shared with you that supports left and right switching three-dimensional image carousel effect controlled by keyboard is as follows

<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>

Copy after login

The above is the js mouse click image switching effect code shared with you. I hope you can like it.