Я хотел бы сделать более одного слайд-шоу из этого на одной странице - PullRequest
Новая
       12

Я хотел бы сделать более одного слайд-шоу из этого на одной странице

1 голос
/ 16 марта 2019

У меня есть код, простое автоматическое слайд-шоу. Я хотел бы разместить более 1 слайд-шоу, но они будут перезаписывать друг друга. Пожалуйста, помогите мне, как я могу решить это. Пожалуйста, помогите мне решить эту проблему. Я хотел бы использовать эти слайд-шоу на той же странице, но когда я пробую, работает только 1 слайд-шоу. Я хотел бы использовать 8 типов этого слайд-шоу в будущем. И еще 1, я хотел бы поместить простую анимацию между изображениями, когда они переключаются. HTML: 

<div class="pic-wrapper">
<img name="slide" width="400" height="377" object-fit="cover"/>
</div>

и 

<div class="pic-wrapper">


<img name="slide2" width="400" height="377" object-fit="cover"/>

</div>

и мои JavaScript: 

<script>
    var i = 0;          // Start Point
var images = [];    // Images Array
var time = 3000;    // Time Between Switch

// Image List
images[0] = "img/kosar/kosar1.jpg";
images[1] = "img/kosar/kosar2.jpg";
images[2] = "img/kosar/kosar3.jpg";
images[3] = "img/kosar/kosar4.jpg";

// Change Image
function changeImg(){
    document.slide2.src = images[i];

    // Check If Index Is Under Max
    if(i < images.length - 1){
      // Add 1 to Index
      i++; 
    } else { 
        // Reset Back To O
        i = 0;
    }

    // Run function every x seconds
    setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload=changeImg;
</script>

и 

<script>
    var i = 0;          // Start Point
var images = [];    // Images Array
var time = 3000;    // Time Between Switch

// Image List
images[0] = "img/roplabda/ropi1.jpg";
images[1] = "img/roplabda/ropi2.jpg";
images[2] = "img/roplabda/ropi3.jpg";
images[3] = "img/roplabda/ropi4.jpg";

// Change Image
function changeImg(){
    document.slide.src = images[i];

    // Check If Index Is Under Max
    if(i < images.length - 1){
      // Add 1 to Index
      i++; 
    } else { 
        // Reset Back To O
        i = 0;
    }

    // Run function every x seconds
    setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload=changeImg;
</script>

1 Ответ

0 голосов
/ 16 марта 2019

Почему бы вам не объединить ваш сценарий в нечто подобное? 

var slide1 = 0;          // First Slide index
var slide2 = 0;  //Second Slide Index
var images = [];    // Images Array
var time = 3000;    // Time Between Switch

// Image List
imageObjects = { 'firstSlide': [
"img/roplabda/ropi1.jpg",
"img/roplabda/ropi2.jpg",
"img/roplabda/ropi3.jpg",
"img/roplabda/ropi4.jpg",
], 
'secondSlide': [
 "img/kosar/kosar1.jpg",
 "img/kosar/kosar2.jpg",
 "img/kosar/kosar3.jpg",
 "img/kosar/kosar4.jpg"
]};


// Change Image
function changeImg(){
    document.slide.src = imageObjects.firstSlide[slide1];
        document.slide2.src = imageObjects.secondSlide[slide2];
    // Check If Index Is Under Max
    if(slide1 < imageObjects.firstSlide.length - 1){
      // Add 1 to Index
      slide1++; 
    } else { 
        // Reset Back To O
        slide1 = 0;
    }
    if(slide2 < imageObjects.secondSlide.length - 1){
      // Add 1 to Index
      slide2++; 
    } else { 
        // Reset Back To O
        slide2 = 0;
    }

    // Run function every x seconds
    setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload=changeImg;

Если вы действительно хотите сохранить отдельные сценарии для этого слайд-шоу, по любой причине. Тогда вам, вероятно, следует сохранять имена переменных «i» и «images» уникальными и не повторять их в следующем сценарии.

...