テキストと画像を使用してスライドショーを作成する方法

Question

スライドショーのテキストと画像に同じ時間と同じdivのコードが必要です。私はいくつかのコードを試してみたが、時間は同じですが、画像の高速テキストより

var myImage = document.getElementById("myphoto"); 
var imageArray = ["14184285_574618009394184_1196314983678721559_n.jpg", "uofk.jpg", "board.jpg"]; 
var imageIndex = 0; 
function changeImage() { 
    myphoto.setAttribute("src", imageArray[imageIndex]) 
    imageIndex++; 
    if (imageIndex >= imageArray.length) { 
    imageIndex = 0; 
    } 
} 
var handel = setInterval(changeImage, 5000); 

var cnt = 0, 
    texts = []; 

//save the texts in an array for re-use 
$(".textContent").each(function() { 
    texts[cnt++] = $(this).text(); 
}); 

function slide() { 
    if (cnt >= texts.length) 
    cnt = 0; 

    $('#textMessage').html(texts[cnt++]); 
    $('#textMessage').fadeIn('slow').animate({ opacity: 1.0 }, 5000).fadeOut('slow', function() { 
    return slide() 
    });  
} 

slide() 

Answer 1

https://jsfiddle.net/q9d2t4kt/1/

<script> 
var slides = document.querySelectorAll('#slides .slide'); 
var currentSlide = 0; 
var slideInterval = setInterval(nextSlide,2000); 

function nextSlide(){ 
slides[currentSlide].className = 'slide'; 
currentSlide = (currentSlide+1)%slides.length; 
slides[currentSlide].className = 'slide showing'; 
} 
</script> 
<style> 
/* 
essential styles: 
these make the slideshow work 
*/ 
#slides{ 
position: relative; 
height: 150px; 
padding: 0px; 
margin: 0px; 
list-style-type: none; 
} 

.slide{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
height: 100%; 
opacity: 0; 
z-index: 1; 

-webkit-transition: opacity 1s; 
-moz-transition: opacity 1s; 
-o-transition: opacity 1s; 
transition: opacity 1s; 
} 

    .showing{ 
    opacity: 1; 
    z-index: 2; 
    } 



    /* 
    non-essential styles: 
    just for appearance; change whatever you want 
    */ 

.slide{ 
font-size: 40px; 
padding: 40px; 
box-sizing: border-box; 
background: #333; 
color: #fff; 
} 

    .slide:nth-of-type(1){ 

      //you can use image tag 
    background: red; 
    } 
     .slide:nth-of-type(2){ 
background: orange; 
    } 
.slide:nth-of-type(3){ 
    background: green; 
} 
     .slide:nth-of-type(4){ 
    background: blue; 
     } 
     .slide:nth-of-type(5){ 
background: purple; 
     } 
      </style> 
    <ul id="slides"> 
<li class="slide showing">Slide 1</li> 
<li class="slide">Slide 2</li> 
<li class="slide">Slide 3</li> 
<li class="slide">Slide 4</li> 
<li class="slide">Slide 5</li> 
</ul>