带有淡入/淡出功能的简单jQuery幻灯片

8yparm6h 于 2022-12-12 发布在 jQuery

关注(0)|答案(5)|浏览(102)

我有一个非常简单的jQuery幻灯片：http://jsfiddle.net/6zA4B/

HTML格式：

<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

JavaScript程式码：

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});

它工作得很完美，我只是想用3个div替换3个img标签（这样我就可以在图片下面加上一个标题）。我该如何修改脚本来实现这一点呢？我试过了，但可能我做错了什么...

HTML格式：

<div class="fadein">
    <p><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">image1</p>
    <p><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">image2</p>
    <p><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">image3</p>
</div>

JavaScript程式码：

$(function(){
    $('.fadein p:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('p').fadeIn().end().appendTo('.fadein');}, 3000);
});

http://jsfiddle.net/S4SmM/1/：D中的一个

jquery

来源：https://stackoverflow.com/questions/14003964/simple-jquery-slideshow-with-fadein-fadeout

5条答案

按热度按时间

xurqigkl1#

您的一个选择器略微关闭：

$('.fadein :first-child')

选择.fadein下的第一个子元素。这包括p元素的第一个子元素，也就是要旋转到的图像。
您希望将:first-child选择器限制为.fadein下的直接元素。一种方法是使用child selector：

$('.fadein > :first-child')

示例：http://jsfiddle.net/S4SmM/4/

赞(0）回复(0）举报 2022-12-12

njthzxwz2#

请使用下列程式码：
于飞：

<div class="fadein">
    <div><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"><p>image1</p></div>
<div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"><p>image2</p></div>
    <div><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"><p>image3</p></div>
</div>

CSS：

.fadein { position:relative; height:332px; width:500px; }
.fadein div {position:absolute;text-align:center;height:100%;}
.fadein p { position:absolute; bottom:0;width:100%;color:white;background-color:rgba(0,0,0,0.6);height:1em;padding-bottom:10px;}

JS：

$.fn.nextOrFirst = function(selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
}

$(function() {
    $('.fadein div:eq(0)').addClass("active");
    $('.fadein div:gt(0)').hide();
    setInterval(function() {
        $('.active:eq(0)').fadeOut().removeClass("active").nextOrFirst('div').addClass("active").fadeIn().end()
    }, 3000);
});

JsFiddle：http://jsfiddle.net/S4SmM/5/

赞(0）回复(0）举报 2022-12-12

hxzsmxv23#

我喜欢Andrew Whittaker的答案，但更喜欢使用Fadeout回调函数来给予其更“生动”一些：

setInterval(function(){$('.fadein > :first-child').fadeOut(1000, function() {
    $(this).next('p').fadeIn(1000).end().appendTo('.fadein');   
})
}, 5000);

赞(0）回复(0）举报 2022-12-12

szqfcxe24#

您也可以使用jquery-fade-slider插件

$(selector).fadeSlider()

Link to Github Repo

赞(0）回复(0）举报 2022-12-12

r9f1avp55#

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <style>
    .slider{
       position: relative;
       width: 1000px;
       height: 300px;
       margin: 0px auto;
    }

    img {
       position: absolute;
       top:0;
       left:0;
       width: 1000px;
       height: 300px;
    }
</style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
 
    <script>
        $( document ).ready(function(){
    fade();
    setInterval(fade, 5000);
});
var i = 1;
function fade() {
  $('#img-' + i).fadeOut(2000);
  i++;
  if (i>3){
        i = 1
      }
    
  $('#img-' + i).fadeIn(2000);

}  </script>
</head>
<body>
    <div class="slider">
        <img id="img-1" src="https://i.picsum.photos/id/1028/1921/1480.jpg?hmac=7rV8P9L5kV_5PMZcIIXOT-wN3gn7VwoYLl5YC4uNr0g">
        <img id="img-2" src="https://i.picsum.photos/id/455/1922/1480.jpg?hmac=vqLUitWLN713y2jRmGcpEAChI9qUH5q7HB1yLjPNjYU">
        <img id="img-3" src="https://i.picsum.photos/id/798/1920/1480.jpg?hmac=9yv1GtCO1YXMiM0ShMmoT-LJn0ZrV6A7a_aY0VWWqr8">
     </div>

</body>
</html>

赞(0）回复(0）举报 2022-12-12

我来回答

带有淡入/淡出功能的简单jQuery幻灯片

5条答案

相关问题

热门标签

最新问答