幻灯片不显示左/右箭头

Posted

技术标签:

【中文标题】幻灯片不显示左/右箭头【英文标题】:Slideshow not showing the left/right arrows 【发布时间】:2017-02-17 19:04:20 【问题描述】:

我的网站上有四个幻灯片,在我添加 jQuery 函数 Backstretch 之前,它们都运行良好。现在左右箭头显示为圆形和黑色 - 但是当箭头图像被拖动到​​新选项卡中时,您可以看到它应有的样子。

这是我的幻灯片代码:

<div dir="ltr" style="text-align: left;" trbidi="on">
<center>

<html>
<title>W3.CSS</title>

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"></link>
<style>
.mySlides display:none
</style>
<body>

<div class="w3-container">
</div>
<div class="w3-content" style="max-width: 771px;">

  <img class="mySlides" src="https://1.bp.blogspot.com/-M7Z6DU_4rr4/WH854ptAAnI/AAAAAAAAfxk/lT87QTRG-K8IV_KT0bp4rNOpdI2c2Z3xgCLcB/s1600/A.jpg" style="width: 771px;" />
  <img class="mySlides" src="https://2.bp.blogspot.com/-os3VKF2UqTY/WH86xNs-pjI/AAAAAAAAfzk/vbnk731lmio-YwBYtybdtyEwLWR2H0HuQCLcB/s1600/Z25.jpg" style="width: 771px;" />
  <img class="mySlides" src="https://1.bp.blogspot.com/-q-mfkdFqElk/WH86yBXX2nI/AAAAAAAAfzo/GT8IOltOyho76hyksDTl89L9yJ2pfG0mwCLcB/s1600/Z30.jpg" style="width: 771px;" />


<a class="w3-btn-floating" onclick="plusDivs(-1)" style="left: 0; position: absolute; top: 45%;"><img src="https://1.bp.blogspot.com/-9TRFDOt59CI/Vz4EANpBSuI/AAAAAAAAdbY/wn8hFl3KfGAdq5jqeE1XZ00STJDBPaRoQCLcB/s1600/left.png" style="height: 22px; width: 16px;" /></a>
<a class="w3-btn-floating" onclick="plusDivs(1)" style="position: absolute; right: 0; top: 45%;"><img src="https://3.bp.blogspot.com/-0oFX79ip8cY/Vz4EAMYwacI/AAAAAAAAdbU/429-hZhCwhAEZOWn7bqVb1Ze7Ub0h-1FgCLcB/s1600/right.png" style="height: 22px; width: 16px;" /></a>

</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) 
  showDivs(slideIndex += n);


function currentDiv(n) 
  showDivs(slideIndex = n);


function showDivs(n) 
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) slideIndex = 1    
  if (n < 1) slideIndex = x.length ;
  for (i = 0; i < x.length; i++) 
     x[i].style.display = "none";  
  
  for (i = 0; i < dots.length; i++) 
     dots[i].className = dots[i].className.replace(" w3-border-red", "");
  
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-border-black";

</script>

</body>
</html> 
</center>
</div>

【问题讨论】:

【参考方案1】:

您的代码工作正常,您只需将 z-index 属性添加到您的箭头图像,以便它在图像上呈现,并且我还注释了点元素,因为截至目前还没有现在。

这是工作的sn-p

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) 
  showDivs(slideIndex += n);


function currentDiv(n) 
  showDivs(slideIndex = n);


function showDivs(n) 
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) slideIndex = 1    
  if (n < 1) slideIndex = x.length ;
  for (i = 0; i < x.length; i++) 
     x[i].style.display = "none";  
  
  for (i = 0; i < dots.length; i++) 
     dots[i].className = dots[i].className.replace(" w3-border-red", "");
  
  x[slideIndex-1].style.display = "block";  
 // dots[slideIndex-1].className += " w3-border-black";
// since you dont have any element with name demo this returns error
            .mySlides 
                display: none
            
<div dir="ltr" style="text-align: left;" trbidi="on">
    <center>

        <html>
        <title>W3.CSS</title>

        <link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"></link>

        <body>

            <div class="w3-container/">
            <div class="w3-content" style="max-width: 771px;">

                <img class="mySlides" src="https://1.bp.blogspot.com/-M7Z6DU_4rr4/WH854ptAAnI/AAAAAAAAfxk/lT87QTRG-K8IV_KT0bp4rNOpdI2c2Z3xgCLcB/s1600/A.jpg"
                    style="width: 771px;" />
                <img class="mySlides" src="https://2.bp.blogspot.com/-os3VKF2UqTY/WH86xNs-pjI/AAAAAAAAfzk/vbnk731lmio-YwBYtybdtyEwLWR2H0HuQCLcB/s1600/Z25.jpg"
                    style="width: 771px;" />
                <img class="mySlides" src="https://1.bp.blogspot.com/-q-mfkdFqElk/WH86yBXX2nI/AAAAAAAAfzo/GT8IOltOyho76hyksDTl89L9yJ2pfG0mwCLcB/s1600/Z30.jpg"
                    style="width: 771px;" />


                <a class="w3-btn-floating" onclick="plusDivs(-1)" style="left: 0; position: absolute; top: 45%; z-index: 2;"><img src="https://1.bp.blogspot.com/-9TRFDOt59CI/Vz4EANpBSuI/AAAAAAAAdbY/wn8hFl3KfGAdq5jqeE1XZ00STJDBPaRoQCLcB/s1600/left.png"
                        style="height: 22px; width: 16px;" /></a>
                <a class="w3-btn-floating" onclick="plusDivs(1)" style="position: absolute; right: 0; top: 45%; z-index: 2;"><img src="https://3.bp.blogspot.com/-0oFX79ip8cY/Vz4EAMYwacI/AAAAAAAAdbU/429-hZhCwhAEZOWn7bqVb1Ze7Ub0h-1FgCLcB/s1600/right.png"
                        style="height: 22px; width: 16px;" /></a>

            </div>

        </body>

        </html>
    </center>
</div>

【讨论】:

谢谢!但恐怕我太累了,无法清晰地思考(或者通常太缺乏经验) - 我将代码按原样复制并粘贴到我的网站上,但它似乎不起作用? 您共享的任何代码都可以在此处的 sn-p 中看到,如果有任何其他问题,请分享确切的问题 是的,我可以看到您提供的代码确实有效(当我单击“运行代码 sn-p”时)但是当我将它复制并粘贴到我的博客上时,按照它在您的发帖,没用。 在这种情况下,除非你分享你的代码到底在做什么或者你在哪里复制粘贴它,我恐怕无法提供帮助 我不知道如何解释......如果我只是编辑自己的代码,添加 z-index,它不会改变任何东西 - 箭头仍然是黑色圆圈。然后,如果我将您提供的内容复制并粘贴到我的 Blogger 页面中,这些照片只会出现在另一张之上(中间图像旁边有箭头;但它什么也没做,仍然是黑色圆圈)和您帖子中代码的顶部(从 var slideIndex = 1; 到 x[slideIndex-1].style.display = "block";)出现在图片上方。

以上是关于幻灯片不显示左/右箭头的主要内容,如果未能解决你的问题,请参考以下文章

到达最后一张幻灯片时,使用键盘左箭头键不应向左滚动

猫头鹰旋转木马2 - 如何在幻灯片放映之外获得左箭头和右箭头?

jQuery 虚拟键盘 - 设置左箭头和右箭头

gephi预览视图中为啥不能显示箭头,求大神指导

如何做出一条沿着轨迹慢慢显示的箭头

ppt中箭头链接和返回主页怎么弄