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

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

javascript jquery html image

Javascript 如何确保在页面加载jQuery时加载第一张幻灯片？,javascript,jquery,html,image,slider,Javascript,Jquery,Html,Image,Slider,我想知道如何确保在使用此代码打开页面时加载幻灯片我修改了代码，但它不会运行，或者在单击#1后加载幻灯片中的第一个图像。我需要它来加载页面加载时的第一个图像。我提前感谢大家帮助我理解这一点 <script> var slideArray = [ "ansel_adams1.jpg", "ansel_adams2.jpg", "ansel_adams3.jpg", "ansel_adams4.jpg", "ansel_adams5.jpg" ]; $(document).re

我想知道如何确保在使用此代码打开页面时加载幻灯片我修改了代码，但它不会运行，或者在单击#1后加载幻灯片中的第一个图像。我需要它来加载页面加载时的第一个图像。我提前感谢大家帮助我理解这一点

    <script>

var slideArray = [
"ansel_adams1.jpg",
"ansel_adams2.jpg",
"ansel_adams3.jpg",
"ansel_adams4.jpg",
"ansel_adams5.jpg"
];

$(document).ready(function(){
var slideArray =["ansel_adams1.jpg","ansel_adams2.jpg","ansel_adams3.jpg","ansel_adams4.jpg","ansel_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>


变量slideArray=[
“ansel_adams1.jpg”，
“ansel_adams2.jpg”，
“ansel_adams3.jpg”，
“ansel_adams4.jpg”，
“ansel_adams5.jpg”
];
$（文档）.ready（函数（）{
var slideArray=[“ansel_adams1.jpg”、“ansel_adams2.jpg”、“ansel_adams3.jpg”、“ansel_adams4.jpg”、“ansel_adams5.jpg”]；
$（'.container'）。在（''）之后；
$（'.slide image'）.html（''）；
$（'.slide image'）。在（''）之后；
var slideLength=slideArray.length；
对于（i=0；i'）；
}
$（'#nav li a'）.bind（'click'，function（）{
var numSlide=$（this.attr（'rel'）；
$（'.slide image'）.html（''）；
$（'.slide image img'）.fadeIn（2000）；
$（'#nav li a'）.removeClass（'active'）；
$（this.addClass（'active'）；
}); 
});
使用jQuery事件和效果项目

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

$('#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');

$（'nav li a'）.bind（'click'，function（）{
var numSlide=$（this.attr（'rel'）；
$（'.slide image'）.html（''）；
//添加了完整回调以在动画完成时切换类
$（'.slide image img'）.fadeIn（2000年，函数（）{
$（'#nav li a'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
}); 
$（'#nav li a'）.eq（0）.trigger（'click'）；

jsternadel，感谢您提供的解决方案。我使用了它，它在打开网页时加载/触发了幻灯片。再次谢谢你。