Web-Gimmick Web制作と知識のメモ帳

レスポンシブ対応、画面幅100%の画像スクローラーの作り方。

仕事で必要になったのでレスポンシブ対応の横幅100%の画像スクローラーを作ってみました。
複数ならべた画像を左or右へとただ永遠にロールさせるというもの。

CSSの調整でレスポンシブにも対応。
各画像にリンクを貼ることも可能です。
使い方しだいでサイトのアクセントになるんじゃないでしょうか。

レスポンシブ対応、画面幅100%の画像スクローラーの作り方

画像スクローラーってこんなの。

勝手にスクローラーとしていますが正式名称は不明です。笑
仕組みとしてはリスト形式でならべた画像を永遠に一定速スクロールしてる感じ。
まぁ言葉より見たほうがはやい、こんなのです。

画像スクローラーのデモ

デモでは767px以上(PC)640px〜767px(タブレット)640px以下(スマホ)として表示を切り替えてます。
画像を追加するのも変更するのも簡単。
リンクは張ってませんが画像に張ると効きます。

画像スクローラーの設置方法。

javascript

jQueryがいるのでダウンロードする。
画像ローラーのスクリプトは以下。

// ROLL
$(function() {
	var iphone = /(iPhone)|(iPad)/i.test(navigator.userAgent);
	$.fn.slider = function(param){
		var def = {
			loop: true,
			time: 40,
			speed: 1,
			direction: "left",
			reverse: true,
			auto: true,
			easing: "linear",
			guideSelector: ".rollGuide",
			cellSelector: ".rollCell",
			ctrlSelector: ".rollCtrl",
			ctrlClick: false,
			ctrlHover: false,
			draggable: false,
			dragCursorOpen: "open.cur",
			dragCursorClose: "close.cur",
			shuttle: false,
			once: false,
			restart: true,
			restartTime: 3000,
			pause: false,
			build: true,
			sp: 1
		};
		def.guide = $(this).find(def.guideSelector);
		return this.each(function(){
			if(param){
				delete param.guide;
				delete param.sp;
			}
			$.extend(def, param);
			if(def.draggable || def.shuttle) def.loop = def.auto = def.pause = false;
			def.d = def.direction;
			def.cell = def.cellSelector;
			def.ctrl = def.ctrlSelector;
			def.curOpen = "url(" + def.dragCursorOpen + "), default";
			def.curClose = "url(" + def.dragCursorClose + "), default";
			def.mousedownX = 0;
			if(!def.guide || def.loop && !def.guide.children(def.cell).length || !def.loop && def.guide.hasClass(def.guideSelector)) return true;
			if(def.build){
				$(window).resize(init(def)).triggerHandler("resize");
			}
			def.frameBorder = def.guide.offset().left - def.guide.parent().offset().left;
			def.margin = def.guide.find(def.cell).eq(0).outerWidth(true) - def.guide.find(def.cell).eq(0).outerWidth();
			def.handlerMousedown = iphone ? "touchstart" : "mousedown";
			def.handlerMousemove = iphone ? "touchmove" : "mousemove";
			def.handlerMouseup = iphone ? "touchend" : "mouseup";
			if(def.auto) slider(def);
			if(def.pause){
				def.guide.hover(
					function(){ $(this).find(def.cell).stop(true); },
					function(){ slider(def); }
				);
			}
			if(def.ctrlHover){
				if (iphone){
					def.guide.siblings(def.ctrl)
						.bind(def.handlerMousedown, function(event){
							event.preventDefault();
							def.guide.find(def.cell).stop(true);
							def.sp = def.speed;
							def.direction = $(this).hasClass("right") ? "left" : "right";
							slider(def);
						}).bind(def.handlerMouseup, function(){
							def.guide.find(def.cell).stop(true);
							def.sp = 1;
							def.direction = def.d;
							if(def.auto) slider(def);
						});
				} else {

					def.guide.siblings(def.ctrl).hover(
						function(){
							def.guide.stop(true).find(def.cell).stop(true);
							def.sp = def.speed;
							def.direction = $(this).hasClass("right") ? def.reverse ? "left" : "right" : def.reverse ? "right" : "left";
							slider(def);
						},
						function(){
							def.guide.stop(true).find(def.cell).stop(true);
							def.sp = 1;
							def.direction = def.d;
							if(def.auto) slider(def);
						}
					);
				}
			}
			if(def.ctrlClick){
				def.guide.siblings(def.ctrl).bind(def.handlerMousedown, function(event){

					def.guide.find(def.cell).stop(true, true);

					event.preventDefault();

						def.direction = $(this).hasClass("right") ? def.reverse ? "left" : "right" : def.reverse ? "right" : "left";

					def.once = true;
					slider(def);
					if (def.restart){
						setTimeout(function(){
							def.once = false;
							slider(def);
						}, def.restartTime);
					}
				});
			}
			if(def.draggable){
				def.guide.bind(def.handlerMousedown, function(event){
					event.preventDefault();
					def.mousedownX = (iphone ? event.originalEvent.touches[0].pageX : event.pageX) - def.guide.position().left;
					$(this).stop(true).css("cursor", def.curClose);
					$(document).bind(def.handlerMousemove, dragmove);
				});
				$(document).bind(def.handlerMouseup, function(){
					def.guide.css("cursor", def.curOpen);
					$(document).unbind(def.handlerMousemove, dragmove);
				});
			}
			function dragmove(event){
				var frameEnd = def.guide.parent().width() + def.guide.parent().position().left;
				var guideEnd = def.guide.width() + def.guide.position().left;
				var stuff = 100;
				def.guide.css("position", "absolute").css("left", (iphone ? event.originalEvent.touches[0].pageX : event.pageX) - def.mousedownX);
				if(frameEnd - guideEnd > stuff || def.guide.offset().left - def.guide.parent().offset().left > stuff){
					$(document).unbind(def.handlerMousemove, dragmove).one(def.handlerMouseup, function(){
						def.guide.animate({
							left: frameEnd - guideEnd > stuff ? "+=" + (frameEnd - guideEnd) : 0
						}, {
							duration: 500,
							easing: "easeOutQuart"
						});
					});
				}
			}
			function slider(par){
				var cell = par.guide.find(def.cell);
				if(par.loop){
					cell.first = cell.eq(0);
					cell.last = cell.eq(cell.length - 1);
					if(par.direction.toLowerCase() === "left"){
						cell.first.animate({
							marginLeft: -1 * cell.first.width() - par.margin
						}, {
							duration: ~~Math.abs(par.time / par.sp * cell.first.width() *
								(cell.first.offset().left - par.guide.offset().left < 0 ?
									(cell.first.width() + cell.first.offset().left - par.guide.offset().left) / cell.first.width() : 1
								)
							),
							easing: par.easing,
							complete: function(){
								if(def.loop){
									cell.first.appendTo(par.guide).css("marginLeft", 0);
									if(!par.once) slider(par);
								}
							}
						});
					}else if(par.direction.toLowerCase() === "right"){
						if(cell.first.offset().left - par.guide.offset().left < 0){
							cell.first.animate({
								marginLeft: 0
							},{
								duration: ~~Math.abs(par.time / par.sp * cell.first.width() *
									(cell.first.offset().left - par.guide.offset().left < 0 ?
										(par.guide.offset().left - cell.first.offset().left) / cell.first.width() : 1
									)
								),
								easing: par.easing,
								complete: function(){ if(!par.once) slider(par); }
							});
						}else{
							cell.last.prependTo(par.guide).css("marginLeft", -1 * cell.last.width() - par.margin);
							slider(par);
						}
					}else{ return false; }
				}else{
					var d = par.direction.toLowerCase() === "left" ? -1 : 1;
					var ctrl = par.guide.siblings(par.ctrl);
					ctrl.show();
					par.guide.animate({
						marginLeft: par.guide.width() * d
					}, {
						duration: par.time * par.guide.width() / par.sp,
						easing: par.easing
					});
					var gl = par.guide.offset().left;
					var fl = par.guide.parent().offset().left;
					var timerId = setInterval(function(){
						if(d > 0 && par.guide.offset().left > par.guide.parent().offset().left + par.frameBorder){
							clearInterval(timerId);
							par.guide.stop(true);
							ctrl.filter(".left").hide();
						}
						if(d < 0 && par.guide.parent().width() + par.guide.parent().offset().left + par.frameBorder + par.margin > par.guide.width() + par.guide.offset().left){
							clearInterval(timerId);
							par.guide.stop(true);
							ctrl.filter(".right").hide();
						}
					}, 1);
				}
			}
			function init(def){
				var cell = def.guide.find(def.cell);
				var max = 0;
				var size = 0;
				cell.each(function(){
					max = max > $(this).outerWidth() ? max : $(this).outerWidth();
					size += $(this).outerWidth(true);
				});
				if(!def.loop){
					def.guide.width(size);
					return false;
				}
				while(size < def.guide.parent().width() + max){
					cell.clone(true).appendTo(def.guide);
					size += cell.outerWidth();
				}

				def.guide.width(size + max);
			}
		});
	};
});

HTML

head内に記述

<script>
$(function(){
		$("#roll").slider();
});
</script>

本体HTML

<div class="rollFrame" id="roll">
	<ul class="rollGuide">
		<li class="rollCell"><img src="http://web-gimmick.com/blog/wp-content/themes/gimmick_style1/css/pages/img/roll01.jpg?x60982" width="430" height="320"></li>
		<li class="rollCell"><img src="http://web-gimmick.com/blog/wp-content/themes/gimmick_style1/css/pages/img/roll02.jpg?x60982" width="430" height="320"></li>
		<li class="rollCell"><img src="http://web-gimmick.com/blog/wp-content/themes/gimmick_style1/css/pages/img/roll03.jpg?x60982" width="430" height="320"></li>
		<li class="rollCell"><img src="http://web-gimmick.com/blog/wp-content/themes/gimmick_style1/css/pages/img/roll04.jpg?x60982" width="430" height="320"></li>
		<li class="rollCell"><img src="http://web-gimmick.com/blog/wp-content/themes/gimmick_style1/css/pages/img/roll05.jpg?x60982" width="430" height="320"></li>
		<li class="rollCell"><img src="http://web-gimmick.com/blog/wp-content/themes/gimmick_style1/css/pages/img/roll06.jpg?x60982" width="430" height="320"></li>
	</ul>
</div>

CSS

/* ROLL */
.rollFrame {
	width: 100%;
	height: 320px;
	overflow: hidden;
	position: relative;
}
.rollCell {
	display: block;
	height: 100%;
	float: left;
}
.rollCell img{
	width: 100%;
}

@media screen and (min-width: 640px) and (max-width: 767px)  {
.rollFrame {
	height: 208px;
}
.rollCell {
	max-width: 280px;
}
}

@media screen and (max-width: 640px) {
.rollFrame {
	height: 148px;
}
.rollCell {
	max-width: 200px;
}
}

あとがき。

CSSの調整でサイトに合う様にカスタマイズしてください。
ググってみてもこの手の画像スクローラー?はなかなかでてきませんが、個人的にはけっこう使い勝手がよいのではと思います。

すみません、参考にさせていただいたブログがあったのですが忘れてしまいました…。

関連する記事はこちら

コメントをどうぞ

サイト内検索

Copyright ShitteLog All rights reserved.