【サンプル】ループスライダー

indexに戻る jQueryの基本 jQueryサンプル

【サンプル】スクロールを途中で消す 【サンプル】タグ（文章の）の入れ替え 【サンプル】ループスライダー 【サンプル】カルーセルスライダー

jQueryの基本 jQueryサンプル イメージマップ

ループスライダー

最後と最初に空白が空くのでCSSでマージンをマイナスしてあげる！

【 HTML 】
<div id="loopsliderwrap">
	<div id="loopslider">
	<ul>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide1.gif" width="400" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide2.gif" width="400" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide3.gif" width="400" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide4.gif" width="400" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide5.gif" width="400" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide6.gif" width="400" alt="photo" /></li>
		<li class="lastloop"><img src="<?php echo get_template_directory_uri(); ?>/img/slide7.gif" width="400" alt="photo" /></li>
	</ul>
</div></div><!--/#loopslider-->



【 JavaScript 】
//TOP画面のスライダー
$(function(){
	$('#loopslider').each(function(){
		var loopsliderWidth = $(this).width();
		var loopsliderHeight = $(this).height();
		$(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');

		var listWidth = $('#loopslider_wrap').children('ul').children('li').width();
		var listCount = $('#loopslider_wrap').children('ul').children('li').length;

		var loopWidth = (listWidth)*(listCount);

		$('#loopslider_wrap').css({
			top: '0',
			left: '0',
			width: ((loopWidth) * 2),
			height: (loopsliderHeight),
			overflow: 'hidden',
			position: 'absolute'
		});

		$('#loopslider_wrap ul').css({
			width: (loopWidth)
		});
		loopsliderPosition();

		function loopsliderPosition(){
			$('#loopslider_wrap').css({left:'0'});
			$('#loopslider_wrap').stop().animate({left:'-' + (loopWidth) + 'px'},125000,'linear');
			setTimeout(function(){
				loopsliderPosition();
			},125000);
		};

		$('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
	});
});



【 CSS 】
/* =======================================
	スライダー設定
======================================= */
#loopslider {
	width: 900px;
	height: 280px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

#loopslider ul {
/*	width: 100%;*/
	height: 320px;
	float: left;
	display: inline;
	overflow: hidden;
}
#loopslider ul li {
	width: 400px;
	height: 280px;
	float: left;
	display: inline;
	overflow: hidden;
	padding:0px 5px;
}

.lastloop{margin-right:-50px;}