https://bst-swim.jp/lib/mv.js

1/*
2$(document).ready(function(){
3	var mvSpd = 5000;//mm秡¦
4	var mvCount = $('#mv .mv_img > li').length;
5	var mvNum = 0;
6	$('#mv .mv_img').after('<ul class="mv_img2"></ul>');
7    for (mvNum = 1; mvNum <= mvCount; mvNum++) {
8    	$('#mv .mv_img li:nth-of-type('+mvNum+')').addClass('current');
9    	if(mvNum==1){
10        	$('#mv .mv_img li:nth-of-type('+mvNum+')').css('z-index', mvCount+1);
11    	}else{
12        	$('#mv .mv_img li:nth-of-type('+mvNum+')').css('display', 'none');
13    	}
14    	var mvSrc = $('#mv .mv_img li:nth-of-type('+mvNum+') img').attr("src");
15    	$('#mv .mv_img2').append('<li style="background-image: url('+mvSrc+');" data-index="'+mvSrc+'"></li>');
16    }
17});
18*/
19
20$(window).load(function(){
21	
22	/*------mv slide timer-----*/
23	
24	var mvSpd = 5000;//mm秡¦
25	var mvCount = $('#mv .mv_img > li').length;
26	var mvNum = 0;
27    $('#mv .mv_img').after('<ul class="mv_img2"></ul>');
28	function mvChange(){
29		if(mvNum >= mvCount){
30			mvNum = 1;
31		}else{
32			mvNum ++;
33		}
34		$('#mv .mv_pointer li').removeClass('current');
35		$('#mv .mv_pointer li:nth-of-type('+mvNum+')').addClass('current');
36		
37		var mvSrc = $('#mv .mv_img li:nth-of-type('+mvNum+') img').attr("src");
38		$('#mv .mv_img2').append('<li style="background-image: url('+mvSrc+');"></li>');
39		if(mvCount > 1){
40			$('#mv .mv_img2 li:nth-last-of-type(1)').css({display: 'block', opacity: 0, width: '100%', height: '100%', top: 0, left: 0}).stop()
41			/*.animate({width: '120%', height: '120%', top: '-10%', left: '-10%'}, {queue: false, duration: mvSpd + 2000, easing: 'linear'})*/
42			.animate({opacity: 1}, {queue: false, duration: 2000, easing: 'easeOutCubic', complete: function(){
43				$('#mv .mv_img2 li:nth-last-child(n+3)').remove();
44			}});
45		}else{
46			$('#mv .mv_img2 li:nth-last-of-type(1)').css({display: 'block', opacity: 0, width: '100%', height: '100%', top: 0, left: 0}).stop()
47			/*.animate({width: '120%', height: '120%', top: '-10%', left: '-10%'}, {queue: false, duration: mvSpd + 2000, easing: 'easeOutCubic'})*/
48			.animate({opacity: 1}, {queue: false, duration: 2000, easing: 'easeOutCubic', complete: function(){
49				$('#mv .mv_img2 li:nth-last-child(n+3)').remove();
50			}});
51		}
52	}
53	function StartMVTimer(){
54		mvChangeTimer = setInterval(mvChange, mvSpd);
55	}
56	if(mvCount > 1){
57		StartMVTimer();
58	}else{
59		$('#mv .mv_arrow, #mv .mv_pointer').css({display: "none"});
60	}
61	mvChange();
62	//clearInterval(mvChangeTimer);
63	
64	/*------mv scroll-----*/
65	
66	$('#mv .mv_scroll').click(function(){
67		var offset = 48//header.scrolled height
68		$('body,html').animate({scrollTop: $('main').offset().top - offset}, 1000, 'easeInOutCubic');
69		return false;
70	});
71	
72	/*------mv pointer-----*/
73	
74	for(var i = 0; i < mvCount; i++){
75		$('#mv .mv_pointer').append('<li></li>');
76	}
77	$('#mv .mv_pointer li:eq(0)').addClass('current');
78	$('#mv .mv_pointer li').click(function(){
79		var pointerIndex = $('#mv .mv_pointer li').index(this);
80		if(mvNum !== pointerIndex + 1){
81			clearInterval(mvChangeTimer);
82			mvNum = pointerIndex;
83			mvChange();
84			StartMVTimer();
85		}
86		return false;
87	});
88	
89	/*------mv nav-----*/
90	
91	$('#mv .mv_arrow_next span').click(function(){
92		clearInterval(mvChangeTimer);
93		mvChange();
94		StartMVTimer();
95		return false;
96	});
97	$('#mv .mv_arrow_prev span').click(function(){
98		clearInterval(mvChangeTimer);
99		if(mvNum === 1){
100			mvNum = 2;
101		}else{
102			mvNum = mvNum - 2;
103		}
104		mvChange();
105		StartMVTimer();
106		return false;
107	});
108		
109});