Question

我想通过CSS3编程幻灯片这是我的代码HTML

<div id="slideshow">
        <img src="img/s1.jpg" alt="s1" />
        <img src="img/s2.jpg" alt="s1" />
        <img src="img/s3.jpg" alt="s1" />
    </div>
    <div class="next">
        <img src="img/next.png" />
    </div>
    <div class="prev">
        <img src="img/prev.png" />
    </div>

和这段代码CSS3

.slideshow{
    width: 1020px;
    height: 500px;
    border-bottom: 3px solid #f04831;
    border-top: 3px solid #f04831;
    overflow: hidden;
    }

我想要更改将“下一个”和“预览”图标放在控件幻灯片中

Answer 1

您可以使用增量计数器和简单的getDocumentById来完成。如果你想让你的图像不显示你可以评论或取消显示：none;在CSS上，但你喜欢。这是小提琴：

document.getElementById('btnnext').onclick = myFunction;



// If the user clicks in the window, set the background color of <body> to yellow
var counter = 0;
function myFunction() {
  
  var div = document.getElementById('slideshow');
  var img = div.getElementsByTagName('img')[counter].src;//.childNodes[2];
  
  document.getElementById("imgprev").src=img;//document.getElementById("imgprev").src;
  
  
  counter++;
  if (counter==3) counter = 0;
}

#slideshow{
    /*width: 1020px;
    height: 500px;
    border-bottom: 3px solid #f04831;
    border-top: 3px solid #f04831;
    overflow: hidden;
    visibility:hidden;*/
    display: none;
    }

<div id="slideshow">
        <img src="https://medium.com/img/email/fb_logo.png" alt="s1" />
        <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_64.png" alt="s1" />
        <img src="http://welcome.hp-ww.com/country/us/en/cs/images/i/header-footer/caas-hf-v3/hp-logo.gif" alt="s1" />
    </div>
    
<div id="btnnext" class="next">
        <img src="http://www.drollify.com/wp-content/uploads/2015/03/button-play.png" />
    </div>
    <div class="prev">
        <img id="imgprev" src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Img_blank.png" />
    </div>

如何在CSS3幻灯片中添加下一个图像的点击并预览图像

1 个答案: