jQuery ライブラリ不要 最も(?)簡単なopacity切替型スライダー
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは!
どうしても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は基礎部分です。
デザイン等は用途に合わせて肉付けしてあげてくださいね♪
以上です。