如何确保在页面加载jQuery时加载第一张幻灯片？
如何确保在页面加载jQuery时加载第一张幻灯片？
提问于 2016-02-06 21:59:10
我想知道如何确保在使用此代码打开页面时加载幻灯片，$('#nav li a').eq(0).click();修改了代码，但是在单击#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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-06 22:49:51
我不能100%确定您想要什么，但是如果我不得不猜测，您可以简单地使用.trigger()对任何有单击绑定的元素触发click事件。
$('#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');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35246968
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号