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

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':''}
];
	

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