Zmiana kodu JS zmieniającego jpg aby reagował na 2 przycisk

pytanie zadane 23 sierpnia 2023 w JavaScript przez lalanablanalala Bywalec (2,090 p.)

Zmiana kodu JS zmieniającego jpg aby reagował na 2 przycisk i wyświetlał sie w innym miejscu

wywołuje jc body a img z name=SlideShow wyświetla obrazki

<body onLoad="runSlideShow()"> 

<div id="background" ><img src="img/background/01.jpg" class="bgimage" name='SlideShow' /></div>

a tak wygląda kod. chciałbym zapodać inne linki do zdjęć i inny obrazek go wywołujący. Niestety nie znam sie na JS

// ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ CHANGE BACKGROUND ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 60000 // 60s. 

// Duration of crossfade (seconds)
var crossFadeDuration = 3

var Pic = new Array() 
Pic[0] = 'img/background/01.jpg'
Pic[1] = 'img/background/02.jpg'
Pic[2] = 'img/background/03.jpg'
Pic[3] = 'img/background/04.jpg'
Pic[4] = 'img/background/05.jpg'
Pic[5] = 'img/background/06.jpg'
Pic[6] = 'img/background/07.jpg'
Pic[7] = 'img/background/08.jpg'
Pic[8] = 'img/background/09.jpg'
Pic[9] = 'img/background/10.jpg'
Pic[10] = 'img/background/11.jpg'
Pic[11] = 'img/background/12.jpg'
Pic[12] = 'img/background/13.jpg'
Pic[13] = 'img/background/14.jpg'
Pic[14] = 'img/background/15.jpg'
Pic[15] = 'img/background/16.jpg'
Pic[16] = 'img/background/17.jpg'
Pic[17] = 'img/background/18.jpg'
Pic[18] = 'img/background/19.jpg'
Pic[19] = 'img/background/20.jpg'
Pic[20] = 'img/background/21.jpg'

var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}

1 odpowiedź

odpowiedź 24 sierpnia 2023 przez VBService Ekspert (256,320 p.)

Sprawdź np. taki zapis

<style>
  img {
    display: block;
    object-fit: cover;
  }
  button {
    width: 2rem;
    font-size: 1rem;
  }
  button + button {
    margin-left: .5rem;
  }
</style>

<div id="background" >
  <img src="https://picsum.photos/360/400?random=1" class="bg-image" id="slide-show">
  <button>&lbarr;</button>
  <button>&rbarr;</button>
</div>

<script>
  // ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ CHANGE BACKGROUND ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
  const images = [ 
    'https://picsum.photos/360/400?random=1',
    'https://picsum.photos/360/400?random=2',
    'https://picsum.photos/360/400?random=3',
    'https://picsum.photos/360/400?random=4',
    'https://picsum.photos/360/400?random=5',
    'https://picsum.photos/360/400?random=6',
    'https://picsum.photos/360/400?random=7',
    'https://picsum.photos/360/400?random=8',
    'https://picsum.photos/360/400?random=9',
    'https://picsum.photos/360/400?random=10',
    'https://picsum.photos/360/400?random=11',
    'https://picsum.photos/360/400?random=12'
  ];

  let index = 0;
  const preLoad = [];
  for (let i=0; i<images.length; i++) {
    preLoad[i] = new Image();
    preLoad[i].src = images[i];
  }

  window.addEventListener('DOMContentLoaded', DOMload);
  function DOMload() {
    const buttons = document.querySelectorAll('#background button');
    buttons[0].addEventListener('click', () => { changeSlide(-1); });
    buttons[1].addEventListener('click', () => { changeSlide(+1); });
  }

  function changeSlide(direction) {  
    index = index + direction;
    if (index > images.length - 1) index = 0;
    if (index < 0) index = images.length - 1;
    document.querySelector('#slide-show').src = preLoad[index].src;
  }
</script>

komentarz 24 sierpnia 2023 przez lalanablanalala Bywalec (2,090 p.)

zapis spoko jak ktoś chcę zamieszczać galerie :P Zapomniałem dodać że u mnie ta zmiana dotyczy tła strony Strona (jasny motyw) nie wygląda to najlepiej bo przejścia zdjęć są nagłe ale coś tam działa.

komentarz 24 sierpnia 2023 przez VBService Ekspert (256,320 p.)

nie wygląda to najlepiej bo przejścia zdjęć są nagłe

można dodać w css-ie np. transition na opacity.

komentarz 24 sierpnia 2023 przez lalanablanalala Bywalec (2,090 p.)

.bgimage {
  opacity: .5;
  transition: opacity 2s linear;
}

nie bardzo nie wiem gdzie to miałbym zmienić :D Sądzę że to musiałby zostać zapisane w js skoro on zmienia automatycznie zdjęcia w pętli

komentarz 24 sierpnia 2023 przez VBService Ekspert (256,320 p.)

Tak, w momencie zmiany obrazka przypisywało by na ten czas klasę z transition.

komentarz 24 sierpnia 2023 przez VBService Ekspert (256,320 p.)

Sprawdź

<style>
  img {
    display: block;
    object-fit: cover;
  }
  button {
    width: 2rem;
    font-size: 1rem;
  }
  button + button {
    margin-left: .5rem;
  }
  .bg-image {
    opacity: 1;
    transition: opacity 500ms;
  }
  .fade-out {
    opacity: 0;
  }
</style>
 
<div id="background" >
  <img src="https://picsum.photos/360/400?random=1" class="bg-image" id="slide-show">
  <button>&lbarr;</button>
  <button>&rbarr;</button>
</div>
 
<script>
  // ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ CHANGE BACKGROUND ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
  const images = [ 
    'https://picsum.photos/360/400?random=1',
    'https://picsum.photos/360/400?random=2',
    'https://picsum.photos/360/400?random=3',
    'https://picsum.photos/360/400?random=4',
    'https://picsum.photos/360/400?random=5',
    'https://picsum.photos/360/400?random=6',
    'https://picsum.photos/360/400?random=7',
    'https://picsum.photos/360/400?random=8',
    'https://picsum.photos/360/400?random=9',
    'https://picsum.photos/360/400?random=10',
    'https://picsum.photos/360/400?random=11',
    'https://picsum.photos/360/400?random=12'
  ];
 
  let index = 0;
  const preLoad = [];
  for (let i=0; i<images.length; i++) {
    preLoad[i] = new Image();
    preLoad[i].src = images[i];
  }
 
  window.addEventListener('DOMContentLoaded', DOMload);
  function DOMload() {
    const buttons = document.querySelectorAll('#background button');
    buttons[0].addEventListener('click', () => { changeSlide(-1); });
    buttons[1].addEventListener('click', () => { changeSlide(+1); });
  }
 
  function changeSlide(direction) {  
    index = index + direction;
    if (index > images.length - 1) index = 0;
    if (index < 0) index = images.length - 1;
    document.querySelector('#slide-show').classList.add('fade-out');
    setTimeout(() => {
      document.querySelector('#slide-show').src = preLoad[index].src;
      document.querySelector('#slide-show').classList.remove('fade-out');
    }, 500); // transition: opacity 500ms;    
  }
</script>