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

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

一覧へ戻る
注意
これらの記事は2016年当時の物で結構古いです。モダンブラウザでは不要な記述やJavaScriptでなくともCSSで実現できる機能もあります。 当時の記録として残してありますがあまり参考になるものではありません。
概要
ベルト状に画像がスライドの実装です。
実装例はトップページを参照ください。
使用方法
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

/**
 * ベルト状に画像がスライド
 *
 * @author 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;
}