質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

クリック型jsスライダーを自動ループに変えたいです。

tt55
tt55

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3回答

0グッド

1クリップ

1844閲覧

投稿2020/02/12 02:54

編集2020/02/12 03:03

前提・実現したいこと

WebGL Distortion Slider
https://codepen.io/ashthornton/pen/KRQbMO

このスライダーを実装しており、
ナビゲーションのボタンをクリックする事で画像がスライドするのですが、
これを3秒間隔で自動ループで繰り返したいです。
※クリックしてスライドするまではサイトに組み込めました。

該当のソースコード

const displacementSlider = function(opts) { let vertex = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `; let fragment = ` varying vec2 vUv; uniform sampler2D currentImage; uniform sampler2D nextImage; uniform float dispFactor; void main() { vec2 uv = vUv; vec4 _currentImage; vec4 _nextImage; float intensity = 0.3; vec4 orig1 = texture2D(currentImage, uv); vec4 orig2 = texture2D(nextImage, uv); _currentImage = texture2D(currentImage, vec2(uv.x, uv.y + dispFactor * (orig2 * intensity))); _nextImage = texture2D(nextImage, vec2(uv.x, uv.y + (1.0 - dispFactor) * (orig1 * intensity))); vec4 finalTexture = mix(_currentImage, _nextImage, dispFactor); gl_FragColor = finalTexture; } `; let images = opts.images, image, sliderImages = [];; let canvasWidth = images[0].clientWidth; let canvasHeight = images[0].clientHeight; let parent = opts.parent; let renderWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); let renderHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); let renderW, renderH; if( renderWidth > canvasWidth ) { renderW = renderWidth; } else { renderW = canvasWidth; } renderH = canvasHeight; let renderer = new THREE.WebGLRenderer({ antialias: false, }); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setClearColor( 0x23272A, 1.0 ); renderer.setSize( renderW, renderH ); parent.appendChild( renderer.domElement ); let loader = new THREE.TextureLoader();    loader.crossOrigin = "anonymous"; images.forEach( ( img ) => { image = loader.load( img.getAttribute( 'src' ) + '?v=' + Date.now() ); image.magFilter = image.minFilter = THREE.LinearFilter; image.anisotropy = renderer.capabilities.getMaxAnisotropy(); sliderImages.push( image ); }); let scene = new THREE.Scene(); scene.background = new THREE.Color( 0x23272A ); let camera = new THREE.OrthographicCamera( renderWidth / -2, renderWidth / 2, renderHeight / 2, renderHeight / -2, 1, 1000 ); camera.position.z = 1; let mat = new THREE.ShaderMaterial({ uniforms: { dispFactor: { type: "f", value: 0.0 }, currentImage: { type: "t", value: sliderImages[0] }, nextImage: { type: "t", value: sliderImages[1] }, }, vertexShader: vertex, fragmentShader: fragment, transparent: true, opacity: 1.0 }); let geometry = new THREE.PlaneBufferGeometry( parent.offsetWidth, parent.offsetHeight, 1 ); let object = new THREE.Mesh(geometry, mat); object.position.set(0, 0, 0); scene.add(object); let addEvents = function(){ let pagButtons = Array.from(document.getElementById('pagination').querySelectorAll('button')); let isAnimating = false; pagButtons.forEach( (el) => { el.addEventListener('click', function() { if( !isAnimating ) { isAnimating = true; document.getElementById('pagination').querySelectorAll('.active')[0].className = ''; this.className = 'active'; let slideId = parseInt( this.dataset.slide, 10 ); mat.uniforms.nextImage.value = sliderImages[slideId]; mat.uniforms.nextImage.needsUpdate = true; TweenLite.to( mat.uniforms.dispFactor, 1, { value: 1, ease: 'Expo.easeInOut', onComplete: function () { mat.uniforms.currentImage.value = sliderImages[slideId]; mat.uniforms.currentImage.needsUpdate = true; mat.uniforms.dispFactor.value = 0.0; isAnimating = false; } }); let slideTitleEl = document.getElementById('slide-title'); let slideStatusEl = document.getElementById('slide-status'); let nextSlideTitle = document.querySelectorAll(`[data-slide-title="${slideId}"]`)[0].innerHTML; let nextSlideStatus = document.querySelectorAll(`[data-slide-status="${slideId}"]`)[0].innerHTML; TweenLite.fromTo( slideTitleEl, 0.5, { autoAlpha: 1, filter: 'blur(0px)', y: 0 }, { autoAlpha: 0, filter: 'blur(10px)', y: 20, ease: 'Expo.easeIn', onComplete: function () { slideTitleEl.innerHTML = nextSlideTitle; TweenLite.to( slideTitleEl, 0.5, { autoAlpha: 1, filter: 'blur(0px)', y: 0, }) } }); TweenLite.fromTo( slideStatusEl, 0.5, { autoAlpha: 1, filter: 'blur(0px)', y: 0 }, { autoAlpha: 0, filter: 'blur(10px)', y: 20, ease: 'Expo.easeIn', onComplete: function () { slideStatusEl.innerHTML = nextSlideStatus; TweenLite.to( slideStatusEl, 0.5, { autoAlpha: 1, filter: 'blur(0px)', y: 0, delay: 0.1, }) } }); } }); }); }; addEvents(); window.addEventListener( 'resize' , function(e) { renderer.setSize(renderW, renderH); }); let animate = function() { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); }; imagesLoaded( document.querySelectorAll('img'), () => { document.body.classList.remove('loading'); const el = document.getElementById('slider'); const imgs = Array.from(el.querySelectorAll('img')); new displacementSlider({ parent: el, images: imgs }); });

試したこと

el.addEventListener('click', function() {

この箇所かと思い色々やってみたのですが動かずで、
jsも初心者なのですがご教授頂けませんでしょうか?
どうぞ、よろしくお願い致します。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

kei344

2020/02/12 02:57

(質問文は編集できます)質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
tt55

2020/02/12 03:03

失礼致しました。 コードブロックに致しました。 よろしくお願い致します。

回答3

1

setInterval()でトグル的な処理をすればいいでしょう

投稿2020/02/12 03:50

yambejp

総合スコア109052

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

tt55

2020/02/12 07:06 編集

ご回答ありがとうございます。 それも私なりに調べて組み込んでみたのですが動かずでして、、、 お手数ではございますが、どこをどのように記述すればよいかご教授頂けますと幸いでございます。 どうぞよろしくお願い致します。
yambejp

2020/02/12 07:12

ちょっと複雑にいろいろ記述されすぎててどこでどうと 言える状態ではないですが、たとえばel.addEventListenerが 実行しているなら、 setInterval(()=>{el.click()},3000) するだけでも行けるかもしれません。 ただ、elの取得の仕方や参照の仕方次第なので面倒な 書き方になるかもしれません。 こんなに肥大化させてからする質問じゃないと思います
tt55

2020/02/12 07:25

>こんなに肥大化させてからする質問じゃないと思います 失礼致しました。 codepenで書かれておりました内容を、そのまま記述してしまいました。 これを肥大化と言う事も分からずで大変申し訳ございませんでした。 頂きました内容を反映致しました。 el.addEventListener('click', function () { ↓ setInterval(()=>{el.click()},3000) { 上記のように書き換えました。 <canvas>タグが表示されなくなりました。 これは、また他の原因なのでしょうか。。。
yambejp

2020/02/12 07:29

書き換えるのではなく追加で書くんです
tt55

2020/02/12 07:56

大変失礼致しました。 また迅速にご回答いただきましてありがとうございます。 下記のように反映致しましたところ 3秒後に繰り返す処理は反映できましたが 画像が1枚目をループしている状態でして 記述場所が違うのでしょうか。 pagButtons.forEach(el => { setInterval(()=>{el.click()},3000) el.addEventListener('click', function () { よろしくお願い致します。
yambejp

2020/02/12 08:04

想定通り動かないならelの掴み方が違うんでしょうね 基本的に私の回答は「setIntervalで3秒毎に処理ができる」が 主題で、こまかい動作はもっとモデルを簡略化して、 ご自身で検証しながら調整してください
tt55

2020/02/12 08:11 編集

ありがとうございます。 色々試しながら頑張ってみます。 ステータスは解決していませんので「受付中」とさせて頂きます。

0

ご回答頂きました方、ありがとうございました。
その後、調べながら何とか実装することが出来ました。

属性値data-slideの値(0/1)を同じ3秒間隔で切り替えながら繰り返すjsを組み込んで解決しました。

投稿2020/02/13 10:33

tt55

総合スコア4

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

自己解決

ご回答頂きました方、ありがとうございました。
その後、調べながら何とか実装することが出来ました。

属性値data-slideの値(0/1)を同じ3秒間隔で切り替えながら繰り返すjsを組み込んで解決しました。

投稿2020/02/13 10:32

編集2020/02/13 10:38
tt55

総合スコア4

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。