jQuery ライブラリ不要 最も(?)簡単なopacity切替型スライダー

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは!

どうしてもJqueryネタが多くなってしまうんですが

今日のは結構役に立つかな..?

ライブラリ不要 最も(?)簡単なopacity切替型スライダー

についてです。
「とにかく短くシンプルに」を意識してたらちょっとだけ良い感じになりました。

JavaScript


<script type="text/javascript">
$(function(){
setInterval(
function(){
$("#slide li:last").animate({‘opacity’:’0′,},
{duration:1500,complete:
function() {
$("#slide li:last").clone().prependTo("#slide");
$("#slide li:first").css({‘opacity’:’1′});
$("#slide li:last").remove();
},
});
},8000);
});
</script>

13行です。
HTMLとCSSも至ってシンプルです。

HTML


<ul id="slide">
<li><img src="画像URL"> テキストとか </li>
<li><img src="画像URL"> テキストとか </li>
<li><img src="画像URL"> テキストとか </li>
</ul>

切り替えボタン系は#slide liを#slide li ul liとかでマークアップして
親子にすればシンプルにいけるかな?

CSS


#slide{position:relative;}
#slide li{position:absolute; top:0px; left:0px;}

このCSSは基礎部分です。
デザイン等は用途に合わせて肉付けしてあげてくださいね♪

以上です。

CLIPにて実装してみました

もしよろしければご確認ください。