ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

jQueryでanimateを使ってスライダーをBootstrapに自作その1

ホームページのトップページをスライダーで飾ることは多々あります。世の中には、jQueryのSliderのライブラリは山ほど有り、どれも優れています。ただ、プログラマとしては、自作したいものです。javascriptは、さほど普段使っていないのですが、これを機にjQueryjavascriptの勉強も兼ねて、スライダーを自作してみることにしました。

4枚の画像が一定間隔でDIV要素の中をくるくる回り続けるというものです。

パソコン、タブレットスマホに対応するために、レスポンシブとなっております。そのために、親要素の幅、子要素の幅を所得して、移動距離を算出するところに工夫しました。

デモ https://burrn.work/honoka/top7.html

jQueryをダウンロードし、./js内に jquery-3.3.1.min.js を設置します。

HTMLファイル内にjQueryを指定します。
<script src="./js/jquery-3.3.1.min.js"></script>

HTML内に下記を記載します。box_parentが親要素でその中にbox_childが子要素として4つ有ります。

<div class="row">
 <div class="col-lg-12" id="box_parent">
 <!-- 以下 Jqueryで要素を動かす -->
  <div id="box_child_1" class="box_child"><img src="./images/sub_image_1.jpg" alt="" class="img-responsive"></div>
  <div id="box_child_3" class="box_child"><img src="./images/sub_image_2.jpg" alt="" class="img-responsive"></div>
  <div id="box_child_4" class="box_child"><img src="./images/sub_image_3.jpg" alt="" class="img-responsive"></div>
  <div id="box_child_5" class="box_child"><img src="./images/sub_image_4.jpg" alt="" class="img-responsive"></div>
  <div class="box_text">jQueryでスライダーを自作その1</div>
  <!-- 以上 Jqueryで要素を動かす -->
 </div>
</div>

CSSファイルの記述です。

#box_parent { position: relative; height: 450px; width:100%; }
@media (max-width: 767px) {
 #box_parent { height: 350px; }
}
.box_child{ position: absolute; width: 300px; height: 210px; padding: 10px; }
@media (max-width: 767px) {
 .box_child{ width: 200px; height: 140px; }
}
#box_child_1 { background-color: #007bff; top:10px;left:10px; z-index: 4; }
#box_child_3 { background-color: #8ff9fa; top:10px;right:10px; z-index: 3; }
#box_child_4 { background-color: #007bff; bottom:10px;right:10px; z-index: 2; }
#box_child_5 { background-color: #8ff9fa; bottom:10px;left:10px; z-index: 1; }
.box_text{
 position: absolute;
 width: 500px; height: 50px; top: 0;bottom: 0;left: 0;right: 0; margin: auto;
 font-size:2.0rem; font-weight:600; text-shadow: 1px 1px 1px #007bff;
 z-index: 5;
}
@media (max-width: 767px) {
 .box_text{
  width: 300px;  height: 35px;  font-size:1.2rem;
 }
}

jQueryの記述です。

<script type="text/javascript">
$(function() {
 setTimeout('box_loop()');
});?

function box_loop() {
 var yohaku = 10;
 var sokudo = 1000;
 var box_parent_width = $('#box_parent').width();
 var box_parent_height = $('#box_parent').height();
 var box_child_width = $('.box_child').width();
 var box_child_height = $('.box_child').height();
 $('#box_child_1')
  .animate({'left':( box_parent_width - box_child_width + 0*yohaku) + 'px'},{'duration': sokudo})
  .animate({'top':( box_parent_height - box_child_height - 3*yohaku ) + 'px'},{'duration': sokudo})
  .animate({'left': yohaku + 'px'},{'duration': sokudo})
  .animate({'top': yohaku + 'px'},{'duration': 2*sokudo,'easing': 'swing'});
 $('#box_child_3')
  .animate({'top':( box_parent_height - box_child_height - 3*yohaku ) + 'px'},{'duration': sokudo})
  .animate({'right':( box_parent_width - box_child_width + 0*yohaku) + 'px'},{'duration': sokudo})
  .animate({'top': yohaku + 'px'},{'duration': sokudo})
  .animate({'right': yohaku + 'px'},{'duration': 2*sokudo,'easing': 'swing'});
 $('#box_child_4')
  .animate({'right':( box_parent_width - box_child_width + 0*yohaku) + 'px'},{'duration': sokudo})
  .animate({'bottom':( box_parent_height - box_child_height - 3*yohaku ) + 'px'},{'duration': sokudo})
  .animate({'right': yohaku + 'px'},{'duration': sokudo})
  .animate({'bottom': yohaku + 'px'},{'duration': 2*sokudo,'easing': 'swing'});
 $('#box_child_5')
  .animate({'bottom':( box_parent_height - box_child_height - 3*yohaku ) + 'px'},{'duration': sokudo})
  .animate({'left':( box_parent_width - box_child_width + 0*yohaku) + 'px'},{'duration': sokudo})
  .animate({'bottom': yohaku + 'px'},{'duration': sokudo})
  .animate({'left': yohaku + 'px'},{'duration': 2*sokudo,'easing': 'swing'});
 setTimeout('box_loop()', 6000);
}
</script>

結構簡単に出来るんだな?と思いました。実際のWEBサイトのトップページにするには、もうちょっと体裁を整えねばならないでしょうが、既存のライブラリのみならず、自作も楽しいのでは?と思いました。色々これからも自作してみます。ですので、「その1」というタイトルにしました。

詳しい解説は、後日にする予定です。本日はこれまでにします。

デモ

https://burrn.work/honoka/top7.html