2017年以前の旧ブログ

こんにちは、みっきょんです。
日々研修頑張っています！
今回は研修中に学んだとを研修日記として書きたいと思います。
最近、はじめて作るスライドショーに挑戦しました！
画像を一定のスピードで無限にスライドさせるスライドショーです。
こちらの記事を参考にし、作ってみました。↓
http://black-flag.net/jquery/20110707-3305.html
 
HTML
<div id="loopslider">
<ul>
<li>表示させたい画像</li>
<li>表示させたい画像</li>
<li>表示させたい画像</li>
</ul>
</div>
このようにループさせたい画像をliの中に置きます。
上記だと3枚の画像をループさせられるようになります。
数を変更したい場合は「<li>表示させたい画像</li>」を増減させると変更します。
もしもid名を変更したい場合は緑の場所を任意のidに変更してください。
 
CSS
#loopslider {
    margin: 0 auto;
    width: スライダー全体の幅;
    height: スライダー全体の高さ;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 #loopslider ul {
    height: スライダー全体の高さ;
    float: left;
    display: inline;
    overflow: hidden;
}
 #loopslider ul li {
    width: 画像一枚の高さ;
    height: 画像一枚の幅;
    float: left;
    display: inline;
    overflow: hidden;
}
 /* =======================================
    ClearFixElements
======================================= */
#loopslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 #loopslider ul {
    display: inline-block;
    overflow: hidden;
}
 
上記使用するCSSです。
#loopsliderで幅と高さをスライダー全体の大きさの数値に変更、
#loopslider ul liで画像一枚の幅と高さを設定します。
 
script
$(function(){
$('#loopslider').each(function(){
var loopsliderWidth = $(this).width();
var loopsliderHeight = $(this).height();
$(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');
var listWidth = $('#loopslider_wrap').children('ul').children('li').width();
var listCount = $('#loopslider_wrap').children('ul').children('li').length;
var loopWidth = (listWidth)*(listCount);
$('#loopslider_wrap').css({
top: '0',
left: '0',
width: ((loopWidth) * 2),
height: (loopsliderHeight),
overflow: 'hidden',
position: 'absolute'
});
$('#loopslider_wrap ul').css({
width: (loopWidth)
});
loopsliderPosition();
function loopsliderPosition(){
$('#loopslider_wrap').css({left:'0'});
$('#loopslider_wrap').stop().animate({left:'-' + (loopWidth) + 'px'},25000,'linear');
setTimeout(function(){
loopsliderPosition();
},25000);
};
$('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
});
});
上記のスクリプトをslide.jsのファイルとしてHTMLに読み込ませました。
これで横にループするスライドショーの完成！
が、それだけではありませんでした。
 
 

上の画像の散らばった●部分１つ１つにリンクを設置し矢印の方へスライドというものでした。
<div id="loopslider">
<ul>
<li>
<a>●画像</a>
<a>●画像</a>
<a>●画像</a>
<a>●画像</a>
<a>●画像</a>
</li>
</ul>
</div>
という形にし、●部分の画像１つ１つをポジションを決め、配置していきました。
これで、スライド画像のデザインを崩さずループさせることが出来ました。
まさか、１つの<li>に入れることで出来上がるとは…
今回、篠田さんの知恵をお借りしました。ありがとうございます。
同じスライダーを使用していても、発想を変えると、また違った動きをするものが出来るということを学びました。