happylife[4ページ目] ブログ

【html】
<div class=”container fade_group”>
<ul>
<li>〇〇〇〇〇</li>
<li>◆◆◆◆◆</li>
<li>△△△△△</li>
</ul>
<img src=”<?php echo get_template_directory_uri(); ?>/images/topimage.jpg” alt=”topimage” />
</div>
<!– mainvisual –>

【css】
.container {
width: 500px;
height: 500px;
}
.fade_group ul {
position: relative;
}
.fade_group li {
position: absolute;
top: 0;
left: 0;
}
.fade_group img {
width: 960px;
height: 400px;
}

【js】
$(function() {
‘use strict’;
// 順番にフェードイン
var fadeInList = $(‘.mainvisual li’); // フェードインさせる全ての画像の取得
var fadeSet;
fadeInList.hide(); //全ての画像を非表示
// フェードイン起動関数の定義
function fadeStart() {
// フェード処理
function fade() {
fadeInList.fadeOut(2000); // フェードアウトにかかる時間
fadeInList.eq(i).fadeIn(2000); // フェードインにかかる時間
i++;
}
// 切り替わり順番にかかる時間
var i = 0;
fadeSet = setInterval(function() { // 2000ミリ秒間隔で切り替わり
if(i == fadeInList.length) { // 最後の画像を表示した時
i = 0; // 最初の画像に戻す
fade();
} else {
fade();
}
},2000);
}
fadeStart(); // フェードイン起動関数
// フェードイン停止関数の定義
function fadeStop() {
setTimeout(function() { // 15000ミリ秒後に停止処理
clearInterval(fadeSet); // フェードイン停止処理
},15000);
}
fadeStop(); // フェードイン停止関数
});

ここの方が断然良くて、コードも短い
https://on-ze.com/archives/1388

2018年10月25日[木曜日]20時34分09秒 | カテゴリ：コーダーのお仕事 - コメント(0)

« 古い記事へ新しい記事へ »

日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Google Maps APIで距離を調べる方法

Googleマップの埋め込みの色々な方法

Googleマップで緯度と経度の確認、入力

リンクPC、スマホ別で緯度経度を確認する

ウェブ地図で緯度経度を確認 （Leaflet版）

GOOGLE MAPで中間地点も取得し表示する

Google Mapsで2地点間の経路を表示する

Google Maps API V3で距離を表示する方法

地図上をクリックして移動距離を算出

Mapをクリックしてマーカーを立てる

各メソッドのオプション

完成したコード

WordPressnの記事内でHTMLタグをテキストとして表示する方法は？

jQueryで要素を順番にフェードさせ表示する

ウェブ地図で緯度経度を確認（Leaflet版）