如何将此图像幻灯片-> https://jsfiddle.net/ukrkw4nb/19/转换为TEXT幻灯片,以便列表项(li's)循环显示以下3个词:1.用户,2。铅3.销售此是我的尝试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();
});
}
});
我想我可以按照您想要的方式工作。
我对此进行了一些编辑:我对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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句