当前位置：文江博客话题详情

如何在 JQuery 中连续设置图像的淡入和淡出幻灯片显示而不发生任何事件？

发布于 2024-09-17 08:09:13 字数 52 浏览 8 评论 0原文

如何使用 CSS 连续设置简单的 JQuery 幻灯片，而不需要任何鼠标悬停、单击等事件？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请恋爱 2024-09-24 08:09:13

编写一个执行幻灯片播放的函数。使用 settimeout 给它一个间隔并调用你的函数。

请参阅此处的示例：循环 css 背景

回复收藏 0 原文

救赎№ 2024-09-24 08:09:13

大多数类似 jQuery 中的函数都是在 $(document).ready() 调用中调用的，或者至少是初始化的。只需包含一个像 setInterval 这样的计时命令，它会返回您的函数，并且它将在加载 DOM 时运行，例如：

$(document).ready(function(){
    var t = setInterval(mySlideShow, 3000)
    });

或者，如果函数重复自身，只需在 ready()< 上调用该函数即可/code>:

$(document).ready(function(){
    mySlideShow();
    });

编辑：

根据要求，我能想到的最简单的幻灯片是这样的：

<div id="slideshow">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
</div>

CSS:images 应该设置为 display:none

然后 jQuery:

$(文档).ready(function(){
    $('#slideshow img:first-child').addClass('shown').show();
    setInterval(幻灯片,3000);
});
//这是函数
函数幻灯片()
    {
    $('#slideshow img:last-child').prependTo($('#slideshow')).fadeIn(1000);
    $('.shown').fadeOut(1000).removeClass('shown');
    }

可能不适合你，但你至少可以看到我要做什么......

Most functions like that in jQuery are called, or at least initialized, in the $(document).ready() call. Simply include a timing command like setInterval that returns your function and it will run when the DOM is loaded, like:

$(document).ready(function(){
    var t = setInterval(mySlideShow, 3000)
    });

Or, if the function repeats itself, simply invoke the function on ready():

$(document).ready(function(){
    mySlideShow();
    });

Edit:

As requested, the simplest slideshow I can think of is something like this:

<div id="slideshow">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
</div>

CSS:images should be set to display:none

Then jQuery:

$(document).ready(function(){
    $('#slideshow img:first-child').addClass('shown').show();
    setInterval(slideShow,3000);
});
//and here is the function
function slideShow()
    {
    $('#slideshow img:last-child').prependTo($('#slideshow')).fadeIn(1000);
    $('.shown').fadeOut(1000).removeClass('shown');
    }

Might not be perfect for you but you can see where I'm going with it at least...

回复收藏 0 原文

~没有更多了~