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>

如何创建包含文本和图像的幻灯片

1 个答案: