javascript 180126インターバル付きスライダー

Posted 2021-05-04

#main_slider {
	ul {
		li {
			display: none;
		}
	}
}

<div id="main_slider">
	<ul>
		<li><img src="images/img_ameni01.jpg" /></li>
		<li><img src="images/img_ameni02.jpg" /></li>
		<li><img src="images/img_ameni03.jpg" /></li>
	</ul>
</div>

$(function(){
	var slide = "#main_slider";
	var i = 0;
	$(slide).find('li').eq(0).show();
	var total = $(slide).find('li').length-1;

	setInterval(function(){
		if(i < total){
			$(slide).find('li').fadeOut(1000);
			i++;
			setTimeout(function(){
				$(slide).find('li').eq(i).fadeIn(1000);
			},1000);
		}else if(i == total){
			$(slide).find('li').fadeOut(1000);
			i = 0;
			setTimeout(function(){
				$(slide).find('li').eq(i).fadeIn(1000);
			},1000);
		};
	},6000);
});