cloud-carousel:複数画像を後ろから前に回転表示するJs
- 2019.06.06
- JavaScript jQuery
- cloud-carousel, 画像回転

複数の画像を後ろから前に回転しながら表示させてます。
1.CSSの記述
<style type="text/css"> <!-- #idCarousel { position: relative; width:900px; height:500px; overflow:scroll; } #idTitle{ font-weight:bold; padding-bottom:7px; } .left{ display:none; width:40px; height:40px; position:absolute; bottom:0; left:20px; font-weight:bold; font-size:30px; cursor:pointer; } .right{ display:none; width:40px; height:40px; position:absolute; bottom:0; right:20px; font-weight:bold; font-size:30px; cursor:pointer; } .left:hover, .right:hover{ color:#666666; } --> </style>
2.読込むJsとJavaScriptの記述
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cloud-carousel.1.0.5.js"></script> <script type="text/JavaScript" src="jquery.mousewheel.js"></script> <script> $(function(){ $("#idCarousel").CloudCarousel({ xPos: 450, yPos: 100, buttonLeft: $("#left"), buttonRight: $("#right"), altBox: $("#idAlt"), //alt titleBox: $("#idTitle"), //title bringToFront:true, //クリック画像を前に移動 mouseWheel:true, //マウスホイール回転 autoRotate:true, //自動回転 autoRotateDelay: 3000 //回転速度 }); }); </script>
3.HTMLの記述例
<div id="idCarousel"> <div id="idTitle"></div> <div id="idAlt"></div> <img class="cloudcarousel" src="images/i1.jpg" alt="画像1" title="1個目の画像"> <img class="cloudcarousel" src="images/i2.jpg" alt="画像2" title="2個目の画像"> <img class="cloudcarousel" src="images/i3.jpg" alt="画像3" title="3個目の画像"> <img class="cloudcarousel" src="images/i4.jpg" alt="画像4" title="4個目の画像"> <img class="cloudcarousel" src="images/i5.jpg" alt="画像5" title="5個目の画像"> <img class="cloudcarousel" src="images/i6.jpg" alt="画像6" title="6個目の画像"> <img class="cloudcarousel" src="images/i7.jpg" alt="画像7" title="7個目の画像"> <img class="cloudcarousel" src="images/i8.jpg" alt="画像8" title="8個目の画像"> <img class="cloudcarousel" src="images/i9.jpg" alt="画像9" title="9個目の画像"> <img class="cloudcarousel" src="images/i10.jpg" alt="画像10" title="10個目の画像"> <div id="left" class="left">←</div> <div id="right" class="right">→</div> </div> <!--/idCarousel-->
cloud-carousel:複数画像を後ろから前に回転表示するデモページ
ソース元:Professor Cloud
何かちょっとカッコいい感じな気がします。
-
前の記事
crawler:テキストや画像を水平に自動スライドするJs 2019.06.05
-
次の記事
PHPのsetcookieを使用してスマホサイトとPCサイトを切り替える方法 2019.06.07