如何确保在页面加载 jQuery 时加载第一张幻灯片

How to ensure that the first slide is loaded when the page loads jQuery?

本文关键字：加载 幻灯片 一张 jQuery 何确保 确保      更新时间：2023-09-26

我想知道如何确保在使用此代码打开页面时加载幻灯片，$('#nav li a').eq(0).click();我更改了代码，但它不会运行或只是在我单击#1后从幻灯片加载第一个图像。 我需要它在加载页面时加载第一个图像。我提前感谢大家帮助理解这一点。

    <script>
var slideArray = [
"answersel_adams1.jpg",
"answersel_adams2.jpg",
"answersel_adams3.jpg",
"answersel_adams4.jpg",
"answersel_adams5.jpg"
];
$(document).ready(function(){
var slideArray =["answersel_adams1.jpg","answersel_adams2.jpg","answersel_adams3.jpg","answersel_adams4.jpg","answersel_adams5.jpg"];
$('.container').after('<div class="slide-image"></div>');
$('.slide-image').html('<img src="images/'+slideArray[0]+'"/>');
$('.slide-image').after('<ul id="nav"></ul>');
var slideLength = slideArray.length;
for(i=0; i < slideLength; i++){
    var slideText = i + 1;
    $('#nav').append('<li><a href="#" rel="'+slideText+'">'+slideText+'</a></li>');
}

$('#nav li a').bind('click', function(){
    var numSlide = $(this).attr('rel');
    $('.slide-image').html('<img src="images/ansel_adams'+numSlide+'.jpg"/>');
    $('.slide-image img').fadeIn(2000);
    $('#nav li a').removeClass('active');
    $(this).addClass('active');
}); 
});
</script>
<body>
    <div class="container">
      <h1>Working with jQuery Events and Effects Project<//h1>
    </div>   
  </body>
</html>

我不是 100% 确定你想要什么，但如果我不得不猜测，我会说你可以简单地使用 .trigger（） 在任何绑定了点击的元素上触发点击事件。

$('#nav li a').bind('click', function(){
    var numSlide = $(this).attr('rel');
    $('.slide-image').html('<img src="images/ansel_adams'+numSlide+'.jpg"/>');
    // added the complete callback to toggle classes when animation is finished
    $('.slide-image img').fadeIn(2000, function() {
        $('#nav li a').removeClass('active');
        $(this).addClass('active');
    });
}); 
$('#nav li a').eq(0).trigger('click');
相关文章：