/**
* scrollslide.js
*
* Copyright 2012 Sawai Hiroshi
* http://www.info-town.jp
*
*/
jQuery(function($) {
/**
* utilities
*/
// create object from object
if (!Object.create) {
(function() {
function F() {}
Object.create = function(object) {
F.prototype = object;
return new F();
};
}());
}
// namespace
var infotown = {};
infotown.namespace = function() {
var object = this;
return function(name) {
if (typeof object[name] == "undefined") {
object[name] = {};
}
return object[name];
};
}();
// implement layout object and handler object
(function() {
/**
* common property
*/
var i, currentPageIndex = 0,
pageSelector = '.page',
group = [],
inc = 960,
groupWidth = 0,
settings = {
'slideSelector': '#slide-container',
'groupSelector': '.slide-group'
},
options;
/**
* Create layout object
*/
var layout = infotown.namespace('layout');
/**
* initialize layout object
*
* class name 'page' elemement align horizonal
*
* @param {jQuery} outer jQuery element
* @param {String} direction slide direction (right,left) optional
* @param {Number} height optional
*/
function _init(outer, direction, height, top) {
direction = direction || 'right';
height = (height === 'auto') ? outer.height() : height;
top = top || 0;
outer.css({
overflow: 'hidden',
position: 'relative',
width: $(window).width()
});
// list of pageSelector class
// default pageSelector .page
$(pageSelector, outer).each(function(i) {
var distanceX;
if (direction === 'right') {
distanceX = i * $('.page').width();
} else if (direction === 'left') {
distanceX = -i * $('.page').width();
}
// .page class element layout
$(this).css({
overflow: 'hidden',
width: $('.page').width(),
top: '0px',
left: distanceX
});
});
$.extend(settings, options);
group[0] = $(settings.groupSelector);
// calculate slide-group width
$('.page', settings.groupSelector).each(function() {
groupWidth += $(this).width();
});
group[0].css('width', groupWidth);
group[0].css({
position: 'absolute',
top: 0,
left: 0
});
// set group copy
group[1] = group[0].clone(true);
group[1].css({
position: 'absolute',
top: 0,
left: group[0].width()
});
$(settings.slideSelector).append(group[1]);
}
layout.init = _init;
/**
* implement handler object
*/
var handler = infotown.namespace('handler');
/**
* follow for loop
*/
function follow(i) {
var index = (i === 0) ? 1 : 0;
if (parseInt(group[i].css('left'), 10) < -group[i].width()) {
group[i].css('left', parseInt(group[index].css('left'), 10) + group[i].width());
}
}
/**
* scroll
*/
function scroll(i) {
group[i].animate({
left: '-=' + inc
}, 500, follow(i));
}
/**
* next
*/
function next() {
for (i = 0; i < group.length; i++) {
scroll(i);
}
}
handler.next = next;
}());
(function() {
var layout = infotown.namespace('layout');
layout.init($('#slide-container'), 'right', 'auto');
var handler = infotown.namespace('handler');
$('#next').click(function() {
handler.next();
});
}());
});
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="index,follow" />
<meta name="keywords" content="javascript, scroll, slide">
<meta name="description" content="JavaScript scroll slide script">
<title>scroll slide JavaScript</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.9.0/build/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/scrollslide.js"></script>
</head>
<body>
<div id="slide-container">
<div class="slide-group">
<div class="page">
<h2>Page0</h2>
<p>
Vivamus vitae neque at lorem mollis blandit vel.
</p>
</div><!-- /page -->
<div class="page">
<h2>Page1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing.
</p>
</div><!-- /page -->
<div class="page">
<h2>Page2</h2>
<p>
Pellentesque quis mauris dui.
</p>
</div><!-- /page -->
<div class="page">
<h2>Page3</h2>
<p>
Proin ut neque mi. Maecenas pharetra facilisis.
</p>
</div><!-- /page -->
<div class="page">
<h2>Page4</h2>
<p>
Phasellus egestas mi eu felis fringilla vestibulum.
</p>
</div><!-- /page -->
</div><!-- /slide-group -->
</div><!-- /slide-container -->
<ul id="slide-nav" class="clearfix">
<li><a id="next" href="#">next ></a></li>
</ul>
</body>
</html>
@charset "utf-8";
/**
* Copyright 2012 Sawai Hiroshi
* http://www.info-town.jp
*
*/
/* -------------------------------------------------------------------
body
------------------------------------------------------------------- */
body {
}
a:link {
color: #666;
}
a:visited {
color: #666;
}
a:hover {
color: #666;
}
a:active {
color: #666;
}
/* -------------------------------------------------------------------
slide-nav
------------------------------------------------------------------- */
ul#slide-nav {
width: 740px;
margin: 0 auto;
}
ul#slide-nav li {
float: left;
}
ul#slide-nav li a {
display: block;
padding: 15px 20px;
text-decoration: none;
outline: none;
}
/* -------------------------------------------------------------------
slide-container
------------------------------------------------------------------- */
#slide-container {
width: 100%;
height: 400px;
margin: 20px auto;
background: #EEE;
}
/* -------------------------------------------------------------------
slide-group
------------------------------------------------------------------- */
#slide-group {
position: absolute;
/* script caluculate width */
height: 400px;
background: #666;
}
/* -------------------------------------------------------------------
page unit of slide
------------------------------------------------------------------- */
.page {
clear: both;
position: absolute;
width: 960px;
height: 400px;
background: #DDD;
z-index: 2;
}
.page h2 {
margin: 2em 2em 1em;
}
.page p {
margin: 0 2em 1em;
}
.page .arrow-right {
position: absolute;
bottom: 10px;
right: 20px;
width: 18px;
height: 18px;
background: #CCC;
text-align: center;
cursor: pointer;
}
.page .arrow-left {
position: absolute;
bottom: 10px;
left: 20px;
width: 18px;
height: 18px;
background: #CCC;
text-align: center;
cursor: pointer;
}
/* -------------------------------------------------------------------
clearfix
------------------------------------------------------------------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
min-height: 1%;
}
/* Hides from -mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from -mac */