chuck0523/photoSlider.html

## photoSlider.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
	<title>photoSlider</title>
	<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script src="jquery.min.js"></script>
</head>
	<style>
		body {
			background-color: #333;
		}
		.title {
			margin: 10px 0 0 5%;
			padding-left: 5%;
			width: 90%;
			border-bottom: #fff 1px solid;
			font-size: 40px;
			font-family: Times New Roman , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;
			letter-spacing: 1px;
			color: #fff;
		}
		.imageSlider {
			margin: 25px auto;
			width: 90%;
		}
		.imageSlider div {
			float: left;
		}
		.buttonContainer {
			width: 10%;
			text-align: center;
		}
		.imagesContainerTd {
			width: 80%;
			max-width: 1000px;
		}
		.imagesContainer {
			position: relative;
			width: 100%;
			border: #fff 5px solid;
			box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
			overflow: hidden;
		}
		.images {
			position: absolute;
			top: 0;
			left: 0;
			margin: 0;
			padding: 0;
		}
		.img{
			display: block;
			float: left;
			height: 360px;
		}
		.image {
			display: block;
		}
		.prevButton, .nextButton {
			width: 10%;
			height: 90px;
			border: none;
			background-color: #333;
		}
		.swipeIcon {
			font-size: 40px;
			margin-top: 50%;
			color: #fff;
			cursor: pointer;
		}
		.swipeIcon:hover {
			opacity: .8;
		}
		.swipeIcon:active {
			opacity: 1;
		}

		.imageSliderS {
			display: none;
		}
		/*.debugBox {
			position: fixed;
			bottom: 0;
			width: 100%;
			font-size: 20px;
			color: #fff;
			text-align: center;
		}*/
		@media screen and (max-width : 600px) {
			.title {
				font-size: 25px;
			}
			.swipeIcon {
				font-size: 25px;
			}
		}
	</style>
<body>
	<header class="title">Photo Slider</header>
	<div class="imageSlider">
		<div class="buttonContainer">
			<span id="prevButton" class="swipeIcon glyphicon glyphicon-chevron-left"></span>
		</div>
		<div class="imagesContainerTd">
			<div id="imagesContainer" class="imagesContainer">
				<ul id="images" class="images" />
			</div>
		</div>
		<div class="buttonContainer">
			<span id="nextButton" class="swipeIcon glyphicon glyphicon-chevron-right"></span>
		</div>
	</div>

	<!-- <div class="debugBox"></div> -->
<script>
$(document).ready(function(){
	var log = function(x){console.log(x);}
	var imgs = ['1', '2', '3', '4', '5', '6', '7'],
		imgsSize = imgs.length;

	var con = $('#imagesContainer'), ul = $('#images');

	var setWH = function() {
		var imgW = con.width(),
			imgH = imgW * (3/4);
		$('.image').each(function(){
			$(this).width(imgW).height(imgH);
		});
		con.height(imgH);
		ul.css({
			'left'	: 0,
			'width'	: imgW*imgsSize
		});
		$('.swipeIcon').css('margin-top',imgH*0.45);
	};

	var createImage = function() {

		for(var i = 0; i < imgsSize; i++) {
			var imgLi = $('<li />').attr({
				'id'	: 'img' + i,
				'class' : 'img'
			});
			var img = $('<img />').attr({
				'id'	: 'image' + i,
				'class'	: 'image',
				'src'	: '../images/' + imgs[i] + '.jpg'
			});
			ul.append(imgLi.append(img));
		}
	};
	createImage();
	setWH();

	var switchImage = function(b) {
		var imgW = $('.image').width(), ulLeft = ul.position().left,
			size = $('#images li').size();

		if(ulLeft === 0 && !b) {
			return false;
		} else if(ulLeft === -imgW*(size-1) && b) {
			return false;
		} else if(ulLeft >= -imgW*(size-1) && ulLeft <= 0) {
			(b) && (imgW = -imgW);
			ul.css('left' , (ulLeft + imgW) + 'px');
		}
	};
	$('#prevButton').click(function() {
 		switchImage(false);

	});
	$('#nextButton').click(function() {
		switchImage(true);
	});

	$(window).resize(function(){
		setWH();
	});
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
	<title>photoSlider</title>
	<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script src="jquery.min.js"></script>
	</head>
	<style>
	body {
	background-color: #333;
	}
	.title {
	margin: 10px 0 0 5%;
	padding-left: 5%;
	width: 90%;
	border-bottom: #fff 1px solid;
	font-size: 40px;
	font-family: Times New Roman , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;
	letter-spacing: 1px;
	color: #fff;
	}
	.imageSlider {
	margin: 25px auto;
	width: 90%;
	}
	.imageSlider div {
	float: left;
	}
	.buttonContainer {
	width: 10%;
	text-align: center;
	}
	.imagesContainerTd {
	width: 80%;
	max-width: 1000px;
	}
	.imagesContainer {
	position: relative;
	width: 100%;
	border: #fff 5px solid;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
	overflow: hidden;
	}
	.images {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	}
	.img{
	display: block;
	float: left;
	height: 360px;
	}
	.image {
	display: block;
	}
	.prevButton, .nextButton {
	width: 10%;
	height: 90px;
	border: none;
	background-color: #333;
	}
	.swipeIcon {
	font-size: 40px;
	margin-top: 50%;
	color: #fff;
	cursor: pointer;
	}
	.swipeIcon:hover {
	opacity: .8;
	}
	.swipeIcon:active {
	opacity: 1;
	}

	.imageSliderS {
	display: none;
	}
	/*.debugBox {
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 20px;
	color: #fff;
	text-align: center;
	}*/
	@media screen and (max-width : 600px) {
	.title {
	font-size: 25px;
	}
	.swipeIcon {
	font-size: 25px;
	}
	}
	</style>
	<body>
	<header class="title">Photo Slider</header>
	<div class="imageSlider">
	<div class="buttonContainer">
	<span id="prevButton" class="swipeIcon glyphicon glyphicon-chevron-left"></span>
	</div>
	<div class="imagesContainerTd">
	<div id="imagesContainer" class="imagesContainer">
	<ul id="images" class="images" />
	</div>
	</div>
	<div class="buttonContainer">
	<span id="nextButton" class="swipeIcon glyphicon glyphicon-chevron-right"></span>
	</div>
	</div>

	<!-- <div class="debugBox"></div> -->
	<script>
	$(document).ready(function(){
	var log = function(x){console.log(x);}
	var imgs = ['1', '2', '3', '4', '5', '6', '7'],
	imgsSize = imgs.length;

	var con = $('#imagesContainer'), ul = $('#images');

	var setWH = function() {
	var imgW = con.width(),
	imgH = imgW * (3/4);
	$('.image').each(function(){
	$(this).width(imgW).height(imgH);
	});
	con.height(imgH);
	ul.css({
	'left' : 0,
	'width' : imgW*imgsSize
	});
	$('.swipeIcon').css('margin-top',imgH*0.45);
	};

	var createImage = function() {

	for(var i = 0; i < imgsSize; i++) {
	var imgLi = $('<li />').attr({
	'id' : 'img' + i,
	'class' : 'img'
	});
	var img = $('<img />').attr({
	'id' : 'image' + i,
	'class' : 'image',
	'src' : '../images/' + imgs[i] + '.jpg'
	});
	ul.append(imgLi.append(img));
	}
	};
	createImage();
	setWH();

	var switchImage = function(b) {
	var imgW = $('.image').width(), ulLeft = ul.position().left,
	size = $('#images li').size();

	if(ulLeft === 0 && !b) {
	return false;
	} else if(ulLeft === -imgW*(size-1) && b) {
	return false;
	} else if(ulLeft >= -imgW*(size-1) && ulLeft <= 0) {
	(b) && (imgW = -imgW);
	ul.css('left' , (ulLeft + imgW) + 'px');
	}
	};
	$('#prevButton').click(function() {
	switchImage(false);

	});
	$('#nextButton').click(function() {
	switchImage(true);
	});

	$(window).resize(function(){
	setWH();
	});
	});
	</script>
	</body>
	</html>