ホームページ > 記事 > ウェブフロントエンド > js は、キーボード control_javascript スキルでの左右切り替えの 3 次元画像カルーセル効果のコード共有をサポートします。
js は、キーボード control_javascript スキルでの左右切り替えの 3 次元画像カルーセル効果のコード共有をサポートします。
- WBOYオリジナル
- 2016-05-16 15:42:281304ブラウズ
この記事の例では、js がキーボード制御をサポートする左右切り替えの 3 次元画像カルーセル効果について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、キーボード制御をサポートする左右切り替えをサポートする JavaScript ベースの 3 次元画像カルーセル効果です。最も重要なのは、キーボードを使用して制御できることです。
機能の紹介:
1. スライドショーの幅を簡単に変更できます。
2.次に表示する写真の枚数を簡単に変更できます。
3. 最後の画像は最初の画像にループバックします。
4. ファンシービューイングプラグインが組み込まれており、画像ごとに詳細な画像情報を表示できます。
运行效果图： -------------------查看效果 下載源网-------- ----------
ヒント: ブラウザが正常に動作しない場合は、閲覧モードを切り替えてみてください。
キーボードで制御される左右切り替えの三次元画像カルーセル効果をサポートする共有された 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 マウスクリック画像切り替えエフェクトのコードです。気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。