Home >Web Front-end >JS Tutorial >js supports left and right switching three-dimensional image carousel effect code sharing under keyboard control_javascript skills

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

WBOYOriginal: 2016-05-16 15:42:281419browse

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery implements smooth secondary drop-down menu effect_jqueryNext article：jquery implements smooth secondary drop-down menu effect_jquery

See more

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

Related articles