マウスの位置で速度を調整できる、無限ループのjQueryスライドショー

今回のスライドに必要な機能は下記の３点です。

• 並んだ画像が延々とループする
• 最初は動かず、マウスが重なっているときだけ動く
• マウスの位置によってループの速度が変わる

この条件を満たすスライドを探した結果、下記の記事を発見。

jQueryでプラグインを使わずに、マウス位置によるスクロールアニメーションを実装してみる | WebDesign Dackel | Webデザイン ダッケル

希望する動作にかなり近い！
しかしループでは無いので、ループ処理を追加します。
コードはこちら。

【HTML】

[crayon]

[/crayon]

【CSS】

[crayon]
*{
margin: 0;
padding: 0;
}

#slider{
position:relative;
overflow:hidden;
}
#slider ul li{
float:left;
list-style: none;
}
#slider ul{
position:relative;
float: left;
}
#slider ul li img{
display: block;
}
[/crayon]

【JavaScript】

[crayon]
$(function(){
//スライドショー化したい要素を指定
var slider = $(‘#slider’);

slider.each(function(){
var slideW = $(this).width();
var slideH = $(this).height();

//実際にスライドさせる要素を作成
$(this).children(‘ul’).wrapAll(‘

‘);
$itemWrapper = $(‘#slider_wrap’);
$item = $(‘#slider_wrap ul’);

var listWidth = $item.children(‘li’).width();
var listCount = $item.children(‘li’).length;

var loopWidth = (listWidth)*(listCount);

$itemWrapper.css({
width: ((loopWidth) * 2),
overflow: ‘hidden’,
position: ‘relative’
});

$item.css({
width: (loopWidth)
});
//ulを複製し、#slider_wrap内に配置
$item.clone().appendTo($itemWrapper);

var maxSpd = 1; //移動速度の最大値
var defaultSpd = 0; //移動速度のデフォルト値
var spd = defaultSpd; //現在の移動速度
var timerID = null;
var FPS = 1000 / 60 >> 0;

var cw = $(this).width();
cl = $(this).offset().left;
xe = 0; //右端の終点
vx = 0, //X移動量
mx = 0, //X移動量
per = 0; //マウス位置のパーセント

function initialize(){

xe = $item.width() * -1;

slider
.bind(“mousemove”, onMouseMove)
.bind(“mouseleave”, onMouseOut);
timerID = setInterval(onEnterFrame, FPS);
}
function onMouseMove(e){
spd = maxSpd * (( (Math.floor( ((e.clientX – cl) / cw) * 100 )) / 50 ) – 1);
console.log(spd);
}
function onMouseOut(e){
spd = defaultSpd;
}
function onEnterFrame(){
mx = mx – spd;
if( mx > 0 ){
mx = xe;
}else if( mx < xe ){ mx = 0; } $itemWrapper.css("left", mx); } $(window).load(function(){ initialize(); }); }); }); [/crayon] デモはこちら

複製の処理はjsで行なわず、htmlにul以下を直書きでもいいですね。
今回はulを複製しましたが、ul内の要素(li以下)のみを複製するほうが、wrap要素が必要なくなりもっとスマートなコードになるかもしれません。
IEは7まで動作を確認することができました。
参考にしたサイトではjsのスライド処理の説明がコメントアウトでされていますが、こちらではその多くを省きました。
詳しく知りたい方はこちらの記事
をご覧ください。