jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

ベルト状に画像がスライド

概要
ベルト状に画像がスライドの実装です。
実装例はトップページを参照ください。
使用方法
JavaScript、html、cssの3つで可能です。
JavaScriptはhtmlの最後に置きます。
var beltimage で画像とリンク先を設定します。数に制限はありません。
備考
動作は element.style.transition で行っています。
応用としてはクリックでリンク先を開くのではなく別の処理を行わせるなど。

var beltimage = [
	{'img':'image/beltimage1.jpg','lnk':''}
	,{'img':'image/beltimage2.jpg','lnk':''}
	,{'img':'image/beltimage3.jpg','lnk':''}
	,{'img':'image/beltimage4.jpg','lnk':'http://yahoo.co.jp/'}
	,{'img':'image/beltimage5.jpg','lnk':''}
	,{'img':'image/beltimage6.jpg','lnk':''}
	,{'img':'image/beltimage7.jpg','lnk':''}
];
	
JavaScript

/**
 * ベルト状に画像がスライド
 *
 * @auther ao-system
 */
(function(window,document,beltimage){
	var speed = 5000;
	var imgCount = 5;
	var imgWidth = 235;
	var img = new Array();
	var workPtr;	//beltimage
	var focusFlag = true;	//フォーカスが外れている時は動作させないため
	var blurCount = 0;
	init();
	function init() {
		workPtr = 0;
		for (var i = 0; i < (imgCount + 2); i++) {
			img[i] = new Image();
			img[i].src = beltimage[workPtr].img;
			img[i].addEventListener('click',function(){location.href=beltimage[workPtr].lnk},false);
			workPtr++;
			if (workPtr >= beltimage.length) {
				workPtr = 0;
			}
		}
		for (var i = 0; i < (imgCount + 2); i++) {
			img[i].style.position = 'absolute';
			img[i].style.marginLeft = (i * (imgWidth + 10)) + 'px';
			img[i].style.transition = 'margin ' + (speed / 1000) + 's linear';
			document.getElementById('belt').appendChild(img[i]);
		}
		setTimeout(function(){
			for (var i = 0; i < (imgCount + 2); i++) {
				img[i].style.marginLeft = ((i - 1) * (imgWidth + 10)) + 'px';
			}
		},10);
		setTimeout(function(){animate();},speed);
		window.addEventListener('focus',function(){ focusFlag = true;},false);
		window.addEventListener('blur',function(){ focusFlag = false;},false);
	}
	function animate() {
		if (focusFlag) {
			nextSet();
			setTimeout(function(){
				for (var i = 0; i < (imgCount + 2); i++) {
					img[i].style.marginLeft = ((i - 1) * (imgWidth + 10)) + 'px';
				}
			},20);
			blurCount = 0;
		} else {
			blurCount++;
		}
		if (blurCount == 0) {
			setTimeout(function(){
				img[(imgCount + 1)].style.display = '';
				animate();
			},speed);
		} else {
			setTimeout(function(){
				animate();
			},1000);
		}
	}
	function nextSet() {
		var tmp = img[0];
		for (var i = 0; i < (imgCount + 1); i++) {
			img[i] = img[i + 1];
		}
		img[(imgCount + 1)] = tmp;
		img[(imgCount + 1)].src = beltimage[workPtr].img;
		img[(imgCount + 1)].addEventListener('click',function(){location.href=beltimage[workPtr].lnk},false);
		workPtr++;
		if (workPtr >= beltimage.length) {
			workPtr = 0;
		}
		img[(imgCount + 1)].style.display = 'none';
		for (var i = 0; i < (imgCount + 2); i++) {
			img[i].style.marginLeft = (i * (imgWidth + 10)) + 'px';
		}
	}
})(window,document,beltimage);
	

<div id="belt"></div>
	

#belt {
	max-width: 1120px;
	height: 175px;
	overflow: hidden;
	position: relative;
}
#belt img:hover {
	opacity: 0.7;
	cursor: pointer;
}
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
top of page