今回のスライドに必要な機能は下記の3点です。
- 並んだ画像が延々とループする
- 最初は動かず、マウスが重なっているときだけ動く
- マウスの位置によってループの速度が変わる
この条件を満たすスライドを探した結果、下記の記事を発見。
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のスライド処理の説明がコメントアウトでされていますが、こちらではその多くを省きました。
詳しく知りたい方はこちらの記事
をご覧ください。
コメント