背景とテキストをボタンクリック＋自動で同時に切り替えたい

Question

https://www.synergy-marketing.co.jp/
上記のサイトのように
メインビジュアルの背景とテキストを自動でかつ左右のボタンクリックで切り替えるようにしたいのですが、
どのようにしたらよいのでしょうか？

現在は下記のコードで自動でフェードイン・アウトで切り替えするところはできておりますが、
ここからボタンを追加して切り替える方法がわからない状態です。

<div id="main_visual">
			<div class="inner">
				<div class="inner_bg_top"></div>
				<p class="inner_bg"></p>
				<div class="catch-left">
						<ul class="catch-left-title">
							<li>テキスト０１</li>
							<li>テキスト０２</li>
							<li>テキスト０３</li>
						</ul>
						<ul class="catch-left-text">
							<li>aaaaaaaaaa</li>
							<li>bbbbbbbbbb</li>
							<li>cccccccccc</li>
						</ul>
					</div>
			</div>
		</div>

//背景自動切り替え
var speed = 1000; // フェードイン・フェードアウトの処理時間（1000で1秒）
var times = 5000; // 画像切り替えの間隔（1000で1秒）
var bgimages = [
'images_c/mainvisual_cafe.png',
'images_c/mainvisual_school.png',
'images_c/mainvisual_consulting.png' // 最後に,をつけない
];
var position = ['0','0', '0'];
$(function(){
// 現在の背景画像番号格納する変数
var thisnum = 0;
// 定期的に実行
setInterval(function(){
// 背景をフェードアウト
$("#main_visual .inner .inner_bg").fadeOut(speed,function(){
// 背景画像番号変更
thisnum = thisnum === bgimages.length - 1 ? 0 : thisnum + 1;
// 背景画像を変更しフェードイン
$(this).css({"background-image":"url("+bgimages[thisnum]+")","background-position":position[thisnum] + " 0"}).fadeIn(speed);

});
}, times);
});

//テキスト自動切り替え
$.fn.autoChange = function(config) {
   // オプション
   var options = $.extend({
      effect  : 'fade',
      type    : 'repaet',
      timeout : 3000,
      speed   : 1000
   }, config);

   return this.each(function() {
      // カウンター初期化
      var current = 0;
      var next = 1;

      // 指定した要素の子要素を取得
      var element = $(this).children();

      // 全ての要素を非表示にする
      $(element).hide();

      // 最初の要素だけ表示する
      $(element[0]).show();

      // 要素を切り替えるスクリプト
      var change = function(){
         // フェードしながら切り替える場合
         if (options.effect == 'fade') {
            $(element[current]).fadeOut(options.speed);
            $(element[next]).fadeIn(options.speed);

         // スライドしながら切り替える場合
         } else if  (options.effect == 'slide') {
            $(element[current]).slideUp(options.speed);
            $(element[next]).slideDown(options.speed);
         }

         // リピートする場合
         if (options.type == 'repeat') {
            if ((next + 1) < element.length) {
                current = next;
                next++;
            } else {
                current = element.length - 1;
                next = 0;
            }
         }

         // 最後の要素でストップする場合
         if (options.type == 'stop') {
            if ((next + 1) < element.length) {
                current = next;
                next++;
            } else {
                return;
            }
         }
      };

      // 設定時間毎にスクリプトを実行
      var timer = setInterval(function(){change();}, options.timeout);
   });
};


// 自動切り替えする要素の設定
 jQuery(function($){
   $('.catch-left-title').autoChange({effect : 'fade', type : 'repeat', timeout: 5000, speed : 2000});
   $('.catch-left-text').autoChange({effect : 'fade', type : 'repeat', timeout: 5000, speed : 2000});
});

ご教示宜しくお願いします。

Answer 1

直接的な回答ではないのですが, 個人的にはCSS+JavaScriptでの対処が好きです.

CSSのtransitionやanimationプロパティでフェードインやテキストブロックのON/OFFを定義しておき, JavaScriptではclass属性を書き換えて各種アニメーションをトリガするようにすると, スタイルシートとスクリプトの役割分担ができてコードがすっきりします.

例を示します.

<div id="imgs" class="a">
	<img class="a" src="a.jpg"/>
	<img class="b" src="b.jpg"/>
	<img class="c" src="c.jpg"/>
	<div class="a">コメントA</div>
	<div class="b">コメントB</div>
	<div class="c">コメントC</div>
</div>
<div id="inputs">
	<input type="button" value="1"/>
	<input type="button" value="-1"/>
</div>

#imgs{
	position: relative;
	width: 100%; height: 500px;
}
#imgs>img{
	opacity: 0;
	transition: opacity 1s linear;
	position: absolute;
	width: 100%; height: 100%;
	object-fit: cover;
}
#imgs.a>img.a,
#imgs.b>img.b,
#imgs.c>img.c{
	opacity: 1;
}
#imgs>div{
	display: none;
	position: absolute;
	width: 200px; height: 200px;
	bottom: 100px; right: 100px;
	background-color: yellow;
	z-index: 1;
}
#imgs.a>div.a,
#imgs.b>div.b,
#imgs.c>div.c{
	display: block;
}

"use strict";
{
	const classes = [].map.call(imgs.querySelectorAll("img"), img => img.className);
	inputs.onclick = e => {
		const current = classes.indexOf(imgs.className);
		const next = (current + (+e.target.value) + classes.length) % classes.length;
		imgs.className = classes[next];
	};
}

Comments

[MeB]

ご返信が遅くなってしまい申し訳ございません。
これに質問の中にある自動で切り替わる処理を追加することはかのうでしょうか？

Answer 2

ライブラリを探せばよいのでは。
コードの勉強をされているのであれば、HTMLにクリックできる物を用意して、クリックしたらchange関数を実行するようにすればとりあえず切り替わると思います。

Comments

[MeB]

今の処理に関数追加ということで認識であっていますでしょうか？

[kei344]

「認識はいっていますでしょうか？」とは？

[MeB]

すみません。訂正しました。

[kei344]

「関数追加」が「今のコードを大きく変えずに実装できるか」と言う意味なら、たぶん出来ると思います。

[MeB]

ありがとうございます！