Question

我试图让滑块在这里工作，并认为我有代码，但有些东西不能正常工作。它只显示CSS中的图像而不是旋转其他图像。

标题中的脚本：

var images=new Array('/images/home/AC-InStock-Rotating.jpg', '/images/home/AC-    MXV-Rotating.jpg', '/images/home/AC-Rental-Rotating.jpg');
var nextimage=0;
doSlideshow();

function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.home-middle-part')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
    setTimeout(doSlideshow,1000);
});
}

体：

<div class="home-middle-part">

            <div class="container clearfix">
                <div class="grid_12 omega"  >
                    <div class="grid_6 omega" >
                        <div style="padding-left: 10px;">

                        </div>
                    </div>  <!-- end of grid 6-->
                    <div class="grid_6 omega" >
                        <div>
                            <table>
                            </table>  
                        </div>

                    </div>  <!-- end of grid 6-->
                </div>   <!-- end of grid 12 -->
            </div> <!-- end of container clearfix -->
        </div>  <!-- end of home-middle-part -->

CSS

.home-middle-part {
background-image: url("/images/home/body-image banner1.jpg");
background-repeat: no-repeat;
}

Answer 1

在浏览器知道.home-middle-part存在之前，标题中的脚本正在运行。在解析HTML之后，您需要doSlideshow();才能运行。您可以通过将脚本标记移动到页面底部来执行此操作，也可以将调用包含在doSlideshow() $(document).ready()中，如下所示：

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

只有CSS显示第一张图像的滑块

1 个答案: