jQUery/JavaScriptHow --> 将图像幻灯片转换为文字幻灯片

Question

如何转换此图片幻灯片 --> https://jsfiddle.net/ukrkw4nb/19/ into TEXT slideshow so that list itemst (li's) show in loop the following 3 words: 1.Users, 2.Leads 3. Sales This is my attempt https://jsfiddle.net/ukrkw4nb/90/

代码如下：

$(function() {
    var slides = $('.slideShow>li');
    var slideCount = 0;
    var totalSlides = slides.length;
    var slideCache = [];

    (function preloader() {
        if (slideCount < totalSlides){
            slideCache[slideCount] = new Image();
            slideCache[slideCount].src = slides.eq(slideCount).find('img').attr('src');
            slideCache[slideCount].onload = function() {
            slideCount++;
            preloader();
        }
    } else {
        // Run the slideshow
        slideCount = 0;
        SlideShow();
    }
}());

function SlideShow() {
    slides.eq(slideCount).fadeIn(1000).delay(2000).fadeOut(1000, function() {
        slideCount < totalSlides - 1 ? slideCount ++ : slideCount = 0;
            SlideShow();
      });
    }
});

Answer 1

我想我已经按照您喜欢的方式工作了。

我对此进行了一些编辑：我对 jQuery 的掌握可能会更好，这让我震惊：预加载器功能是处理图像的使用，对于文本幻灯片来说是不必要的。写你想要的html，去掉preloader函数，然后调用SlideShow函数即可。

$(function() {

 var slides = $('.slideShow>li');
  var slideCount = 0;
  var totalSlides = slides.length;
  var slideCache = [];
  
  
 
 function SlideShow() {
   
slides.eq(slideCount).fadeIn(1000).delay(2000).fadeOut(1000, function() {
      
      slideCount < totalSlides - 1 ? slideCount ++ : slideCount = 0;
      SlideShow();
      
      });
  
  }


 SlideShow();

});

* {
  margin:0;
  padding:0;
}

li {
  display:none;
}

li:first-of-type {
  display:block;
}

div {
  position:absolute;
  width:200px;
  height:200px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideShowContainer">

  <ul class="slideShow">
    <li>Users</li>
    <li>Leads</li>
    <li>Sales</li>
  </ul>


</div>

jQUery/JavaScriptHow --> 将图像幻灯片转换为文字幻灯片

jQUery/JavaScriptHow --> to convert image SlideShow into Words Slideshow

javascript

jquery

slideshow