Question

我开发了一个带有jquery的旋转木马，其中一个图像一个接一个地显示但我在html中犯了一些错误，当这一行执行时会闪烁一些东西。

$('.headerCarouselwrapper :first-child').fadeOut().next('img').fadeIn()

这是我的完整jquery和html代码。请看看并指导我如何顺利过渡。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var bba = {
            init: function () {
                this.slideshow();
                return this;
            },
            slideshow: function () {
                $('.headerCarouselwrapper img:gt(0)').hide();
                setInterval(function () {
                    $('.headerCarouselwrapper :first-child').fadeOut()
            .next('img').fadeIn()
            .end().appendTo('.headerCarouselwrapper');
                }, 5000);
                $('.partsbaseCarouselwrapper img:gt(0)').hide();
                setInterval(function () {
                    $('.partsbaseCarouselwrapper :first-child').fadeOut()
            .next('img').fadeIn()
            .end().appendTo('.partsbaseCarouselwrapper');
                }, 5000);
                $('.careerbaseCarouselwrapper img:gt(0)').hide();
                setInterval(function () {
                    $('.careerbaseCarouselwrapper :first-child').fadeOut()
            .next('img').fadeIn()
            .end().appendTo('.careerbaseCarouselwrapper');
                }, 5000);
                $('.knowledgebaseCarouselwrapper img:gt(0)').hide();
                setInterval(function () {
                    $('.knowledgebaseCarouselwrapper :first-child').fadeOut()
            .next('img').fadeIn()
            .end().appendTo('.knowledgebaseCarouselwrapper');
                }, 5000);
                return this;
            }
        };

        $(document).ready(function () { bba.init(); });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="headerCarouselwrapperOuter" style="width: 100%">
        <div class="headerCarouselwrapper">
            <img src="Images/new-bba-header-image1dyna.jpg" alt=""  style="width: 100%"/>
            <img src="images/new-bba-header-image2dyna.jpg"  alt=""  style="width: 100%"/>
            <img src="images/new-bba-header-image3dyna.jpg"  alt=""  style="width: 100%"/>
            <img src="images/new-bba-header-image4dyna.jpg"  alt=""  style="width: 100%"/>
        </div>
    </div> 
    </form>
</body>
</html>

Answer 1

使用css position确保图像彼此叠加，这样可以解决跳跃效果
将动画分成两个函数调用，以便第二个在第一个完成之前启动
将时间间隔传递给fadeIn()和fadeOut()并进行调整，直至达到预期效果

如果所有图像的高度相同，也会有所帮助。

     var bba = {
         init: function () {
             this.slideshow();
             return this;
         },
         slideshow: function () {
             $('.headerCarouselwrapper img:gt(0)').hide();
             setInterval(function () {
                 $('.headerCarouselwrapper :first-child').fadeOut(1000);
                 $('.headerCarouselwrapper :first-child').next('img').fadeIn(400).end().appendTo('.headerCarouselwrapper');
             }, 5000);
         }
     };
    
     $(document).ready(function () {
         bba.init();
     });

.myImgs {
    width:100%;
    position:absolute;
    top:0;
    left:0;
}
.headerCarouselwrapperOuter {
    width:100%;
    position:relative;
  background-color:#000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="headerCarouselwrapperOuter">
        <div class="headerCarouselwrapper">
            <img src="http://www.bba-reman.com/images/new-bba-header-image1dyna.jpg" alt="" class="myImgs" />
            <img src="http://www.bba-reman.com/images/new-bba-header-image2dyna.jpg" alt="" class="myImgs" />
            <img src="http://www.bba-reman.com/images/new-bba-header-image3dyna.jpg" alt="" class="myImgs" />
            <img src="http://www.bba-reman.com/images/new-bba-header-image4dyna.jpg" alt="" class="myImgs" />
        </div>
    </div>
</body>

有关使用jQuery构建图像Carousel的问题

1 个答案: