jquery点击内容幻灯片图片变化

$(".item_1").click(function(){ 
    var i =1; 
    if (i<=3){ 
    $("#slideshowWindow").wrapInner('<div class="slides" />'); 
    $('<img src="Content_Slide1/'+i+'.png" height="100%" width="100%"/>').appendTo($(".slides")); 
    i++ 
}

谁能告诉我我的代码有什么问题吗？我想要的是我的html成为如下：jquery点击内容幻灯片图片变化

<div id="slideshowWindow"> 
    <img id="Slide_image1" src="Content_Slide1/1.png" height="100%" width="100%" /> 
</div> 
<div class="slide"> 
    <img id="Slide_image2" src="Content_Slide1/2.png" height="100%" width="100%"/> 
</div> 
<div class="slide"> 
    <img id="Slide_image3" src="Content_Slide1/3.png" height="100%" width="100%"/> 
</div>

如果我把下面的html代码相同，幻灯片放映的作品！然后，我删除了所有div幻灯片类。使用上面我使用的Jquery代码，尝试通过点击项目来更改幻灯片图像组。

你有什么想法我做错了什么？

<div class="Main" style="background-image:url(images/bg.jpg)"> 
    <div class="slide"><img></div> 
    <div class="slide"><img></div> 
    <div class="slide"><img></div> 
</div><!--/slideshowWindow-->

来源

2012-04-20 user1345581

阐明你的观点和语言，请！ – thecodeparadox 2012-04-20 04:12:17

缺少语法，混合双引号和单引号。一个'for'循环可能会更好... – elclanrs 2012-04-20 04:17:05

每次点击'.item_1'时，它会将'i'重新设置为1，所以它总是1，因此总是添加相同的图像。 – CWSpear 2012-04-20 04:19:46

$(".item_1").click(function(){ 
    var i; 
    for (i = 1; i <= 3; i += 1) { 
    $("#slideshowWindow").wrapInner('<div class="slides" />'); 
    $('<img src="Content_Slide1/' + i + '.png" height="100%" width="100%"/>') 
     .append($(".slides")); 
    } 
});

这可能是你的目标是什么了。（未测试）

编辑

我做了什么，我想你你的编辑后想jsfiddle。我在jQuery中使用了appendTo方法。

EDIT 2

我已经更新了jsfiddle所以HTML输出将匹配您的HTML输出。

<div class="Main"> 
    <div class="slide"><img src="//lorempixel.com/400/400/abstract/1/" height="100%" width="100%"></div> 
    <div class="slide"><img src="//lorempixel.com/400/400/abstract/2/" height="100%" width="100%"></div> 
    <div class="slide"><img src="//lorempixel.com/400/400/abstract/3/" height="100%" width="100%"></div> 
</div>

注：我只是增加了一些文字给我追加的HTML。

请您正在使用的工具阅读起来：jQuery，js

来源

2012-04-20 04:26:11 jlaceda

我试图把它放在一个幻灯片播放器里面，它仍然不能正常工作！只显示第一张照片，所有其他照片都没有显示。任何想法？？非常感谢您的帮助 – user1345581 2012-04-20 05:43:55

在jsfiddle中，您可以尝试将“.slides”选择器替换为要将图像放入的位置。幻灯片持有者的选择器是什么？ http://api.jquery.com/category/selectors/ – jlaceda 2012-04-20 06:11:14

jquery点击内容幻灯片图片变化

回答

相关问题