blocks|key|2925978|text|没有getElement这样的函数，应该是getElementById|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2925979|document.getElementById('slideshow').innerHTML+=+presentimage;|code-block|syntax|javascript|2925980|entityMap^0|2|A|L|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>There is no such function as <code>getElement</code>, it should be <code>getElementById</code>:</p>

<pre><code>document.getElementById('slideshow').innerHTML = presentimage;
</code></pre>


blocks|key|1458074|text|就快到了..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1458075|我在你的代码中发现了一些东西，我已经修复了它们：|1458076|1458077|没有document.getElement，但是如果没有图片document.getElementById('id')|unordered-list-item|offset|length|style|CODE|1458078|You就不会有幻灯片，所以我添加了<img>标签。|1458079|使用CSS类来设置样式，而不是内联样式，它更具可读性，也更易于维护。|1458080|1458081|这是我最新的提琴：http://jsfiddle.net/robertp/jWLZz/10/|1458082|我不得不对代码做了相当大的改动，以使其工作-并使其更容易阅读：|1458083|1458084|我更改了DOM，删除了内联CSS并通过类添加了样式|1458085|我添加了<img>标记，这样您就可以拥有图像，而不仅仅是它们的名称|1458086|我为两个<a>标记都添加了适当的JavaScript事件处理程序|1458087|<代码>H121我更新了JavaScript函数，所以现在只要您单击上一个或下一个链接，它就会交换图像标记的图像源。<代码>H222<代码>F223|1458088|作为建议，我不会从索引1开始填充数组，而是从0开始填充，以跟上数组在JavaScript中的工作方式。|1458089|我还在下面的答案中添加了代码，我希望这一切都有意义。|1458090|更新的HTML：|1458091|<div+id="slideshow"+class="slideshow">
++++<img+id="slideshowimage"/>

++++<div+id="slideshowcontrols"+class="slideshow">
++++++++<a+href='#'+class='prev-link'>Prev</a>
++++++++<a+href='#'+class='next-link'>Next</a>
+++++</div>
</div>|code-block|syntax|javascript|1458092|更新的JavaScript：|1458093|var+images+=+new+Array;
images[0]+=+"http://placekitten.com/200/100";
images[1]+=+"http://placekitten.com/300/200";
images[2]+=+"http://placekitten.com/200/200";
var+presentimage+=+0;

document.getElementsByClassName('next-link')[0].addEventListener('click',+function()+{
++++alterimage(1);
});
document.getElementsByClassName('prev-link')[0].addEventListener('click',+function()+{
++++alterimage(-1);
});

var+alterimage+=+function+alterimage(alter){
++++presentimage+%2B=+alter;
++++document.getElementById('slideshowimage').setAttribute('src',+images[presentimage]);
}
alterimage(0);|1458094|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/robertp/jWLZz/10/^0|0|0|0|2|J|U|T|0|H|5|0|0|0|9|11|0|0|0|0|0|4|5|0|4|3|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1R|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1T|8|@$H|1U|I|1V|J|K]|$H|1W|I|1X|J|K]]|9|@]|A|$]]|$1|L|3|M|5|G|7|1Y|8|@$H|1Z|I|20|J|K]]|9|@]|A|$]]|$1|N|3|O|5|G|7|21|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|23|8|@]|9|@$H|24|I|25|1|26]]|A|$]]|$1|S|3|T|5|6|7|27|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|V|3|W|5|G|7|29|8|@]|9|@]|A|$]]|$1|X|3|Y|5|G|7|2A|8|@$H|2B|I|2C|J|K]]|9|@]|A|$]]|$1|Z|3|10|5|G|7|2D|8|@$H|2E|I|2F|J|K]]|9|@]|A|$]]|$1|11|3|12|5|6|7|2G|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2H|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2I|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2J|8|@]|9|@]|A|$]]|$1|19|3|1A|5|1B|7|2K|8|@]|9|@]|A|$1C|1D]]|$1|1E|3|1F|5|6|7|2L|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|1B|7|2M|8|@]|9|@]|A|$1C|1D]]|$1|1I|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]]|1J|$1K|$5|1L|1M|1N|A|$1O|1P]]]]

<p>Almost there...</p>

<p>I've found a few things in your code and I have fixed them:</p>

<ul>
<li>There isn't <code>document.getElement</code> but <code>document.getElementById('id')</code></li>
<li>You won't have a slideshow without images, so I added the <code>&lt;img&gt;</code> tag.</li>
<li>Use CSS classes for styling instead of inline styling, it is a lot more readable and easier to maintain.</li>
</ul>

<p>Here is my updated Fiddle:
<a href="http://jsfiddle.net/robertp/jWLZz/10/" rel="nofollow">http://jsfiddle.net/robertp/jWLZz/10/</a></p>

<p>I had to alter the code quite a bit to make it work - and to make it easier to read:</p>

<ul>
<li>I altered the DOM by removing the inline CSS and adding the styling through classes</li>
<li>I added the <code>&lt;img&gt;</code> tag, so that you can have images instead of just their names</li>
<li>I added proper JavaScript event handlers to both the <code>&lt;a&gt;</code> tags</li>
<li>I updated the JavaScript function, so now it swaps the image source of the image tag once you click on the previous or next links.</li>
</ul>

<p>And just as a suggestion, I would not start filling up my arrays from index 1 but 0 to keep up with the way arrays work in JavaScript.</p>

<p>I also added the code bits to my answer below, I hope it all makes sense.</p>

<p>Updated HTML:</p>

<pre><code>&lt;div id="slideshow" class="slideshow"&gt;
    &lt;img id="slideshowimage"/&gt;

    &lt;div id="slideshowcontrols" class="slideshow"&gt;
        &lt;a href='#' class='prev-link'&gt;Prev&lt;/a&gt;
        &lt;a href='#' class='next-link'&gt;Next&lt;/a&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Updated JavaScript:</p>

<pre><code>var images = new Array;
images[0] = "http://placekitten.com/200/100";
images[1] = "http://placekitten.com/300/200";
images[2] = "http://placekitten.com/200/200";
var presentimage = 0;

document.getElementsByClassName('next-link')[0].addEventListener('click', function() {
    alterimage(1);
});
document.getElementsByClassName('prev-link')[0].addEventListener('click', function() {
    alterimage(-1);
});

var alterimage = function alterimage(alter){
    presentimage += alter;
    document.getElementById('slideshowimage').setAttribute('src', images[presentimage]);
}
alterimage(0);
</code></pre>


blocks|key|2942937|text|目前您没有访问存储在数组中的图像，您只需将幻灯片div的innerHTML设置为您的计数器即可。我在幻灯片显示图像div中添加了一个空的img标签。然后，当您通过alterimage函数传递和数组索引时，img标记src属性被设置为数组中相应的图像url。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2942938|<div+id="slideshow"+style="width:960px;height:500px;overflow:hidden;">
++++<div+id="slideshowimage"+style="width:960px;height:500px;overflow:hidden;">
+++++++++<img+src=""/>
++++</div>
++++<div+id="slideshowcontrols"+style="width:960px;height:500px;overflow:hidden;">
++++++++<a+onClick="alterimage(-1);">Prev</a>
++++++++<a+onClick="alterimage(1);">Next</a>
++++</div>
</div>

<script+type="text/javascript">
++++var+images+=+new+Array;
++++images[0]+=+"https://www.google.com/images/srpr/logo9w.png";
++++images[1]+=+"https://www.google.com/images/srpr/logo10w.png";
++++images[2]+=+"https://www.google.com/images/srpr/logo11w.png";
++++var+presentimage+=+0;

+++function+alterimage(alter){
+++++++presentimage+%2B=+alter;
+++++++document.getElementById('slideshowimage').childNodes[1].setAttribute('src',
+++++++images[presentimage]);
+++}
++++alterimage(2);
</script>|code-block|syntax|javascript|2942939|JSFiddle:+http://jsfiddle.net/Lrrpu/|BOLD|2942940|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Lrrpu/^0|O|3|S|9|1L|3|1W|3|29|A|2U|3|2Z|3|0|0|0|9|A|Q|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@$9|1C|A|1D|B|M]]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|N|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

<p>Currently you're not accessing the images stored in your array, you just set the <code>innerHTML</code> of the slideshow <code>div</code> to your counter.  I added an empty <code>img</code> tag to the slideshowimage <code>div</code>.  The <code>src</code> attribute of that <code>img</code> tag is then set to the corresponding image url in the array when you pass and array index through the <code>alterimage</code> function. </p>

<pre><code>&lt;div id="slideshow" style="width:960px;height:500px;overflow:hidden;"&gt;
    &lt;div id="slideshowimage" style="width:960px;height:500px;overflow:hidden;"&gt;
         &lt;img src=""/&gt;
    &lt;/div&gt;
    &lt;div id="slideshowcontrols" style="width:960px;height:500px;overflow:hidden;"&gt;
        &lt;a onClick="alterimage(-1);"&gt;Prev&lt;/a&gt;
        &lt;a onClick="alterimage(1);"&gt;Next&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
    var images = new Array;
    images[0] = "https://www.google.com/images/srpr/logo9w.png";
    images[1] = "https://www.google.com/images/srpr/logo10w.png";
    images[2] = "https://www.google.com/images/srpr/logo11w.png";
    var presentimage = 0;

   function alterimage(alter){
       presentimage += alter;
       document.getElementById('slideshowimage').childNodes[1].setAttribute('src',
       images[presentimage]);
   }
    alterimage(2);
&lt;/script&gt;
</code></pre>

<p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/Lrrpu/" rel="nofollow">http://jsfiddle.net/Lrrpu/</a></p>


<p>Images won't show up in javascript slideshow, I've been working on this for three days now and I'm sick of it. I've even started to cheat and just copy other sliders I've seen online (open source) and use those. This is for work, please help me. </p>

<pre><code>&lt;div id="slideshow" style="width:960px;height:500px;overflow:hidden;"&gt;
  &lt;div id="slideshowimage" style="width:960px;height:500px;overflow:hidden;"&gt;
  &lt;/div&gt;
  &lt;div id="slideshowcontrols" style="width:960px;height:500px;overflow:hidden;"&gt;
    &lt;a onClick="alterimage(-1);"&gt;Prev&lt;/a&gt;
    &lt;a onClick="alterimage(1);"&gt;Next&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
    var images = new Array;
    images[1] = "Images/image1.jpg";
    images[2] = "Images/image2.jpg";
    images[3] = "Images/image3.jpg";
    var presentimage = 1;
    function alterimage(alter){
        presentimage += alter;
        document.getElement('slideshow').innerHTML = presentimage;
    }
    alterimage(0);
&lt;/script&gt;
</code></pre>


Images won't show up in javascript slideshow

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

图像不会在javascript幻灯片中显示，我已经在这上面工作了三天，我对此感到厌烦。我甚至开始作弊，只是复制我在网上看到的其他滑块(开源)并使用它们。这是工作用的，请帮帮我。<div id="slideshow" style="width:960px;height:500px;overflow:hidden;">  ...

问图像不会在javascript幻灯片中显示
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像不会在javascript幻灯片中显示EN