我想在我的網站上添加幻燈片。我正在使用html，css，並希望使用jquery。如何創建響應式圖像幻燈片

Question

這就是我到目前為止所擁有的。 我能夠將圖像保存在容器中，但箭頭不起作用。

我需要幫助Jquery部分並使圖像自己循環運行，但也允許點擊箭頭來更改圖像。

  /*HEADER SECTION allwork*/ #container { width: 1200px; height: 628px; border: 0px solid black; margin: 0 auto; position: relative; } #container>img { width: 100% height: 100%; position: absolute; #container>.btn1 { position: absolute; width: 50px; height: 50px; border: none; border-radius: 15px; top: 150px; background: #2ecc71; color: white; font-size: 30px; } #container>#btn1:hover { box-shadow: 10px 0px 20px 0px #2ecc71; } #container>#btn1:hover { box-shadow: 10px 0px 20px 0px #2ecc71; } #container>#btn1 { position: relative; float: right; }

 <!DOCTYPE html> <html lang="en"> <head> <meta name 'viewport' content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true"> <meta Charset='uft-8'> <link rel='shortcut icon' href="images/favicon.png"> <link rel="stylesheet" href="index.css"> </head> <body> <div id="head"> <div class="header"> <img class="logo" src="images/LOGO.png" alt="logo" /> <ul> <li><a class="navbar" href="index.hmtl">About</a></li> <li><a class="navbar" href="resume.hmtl">Resume</a></li> <li><a class="navbar" href="all work.hmtl">All Work</a></li> </ul> </div> </div> <div id="container"> <img class="slides" src="images/overview.png"> <img class="slides" src="images/construction.png"> <button class="btn1" onclick="plusDivs(-1)">&#10094;</button> <button class="btn2" onclick="plusDivs(+1)">&#10095;</button> </div> <script src="jquery.js"></script> <script src="script.js"></script> </body> </html>

Answer 1

我建議你仔細閱讀鏈接

https://www.w3schools.com/howto/howto_js_slideshow.asp

幻燈片顯然被稱為Carousel。 您還可以查看具有內置輪播支持的bootstrap框架

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Answer 2

這是javascript代碼：

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

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

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("slides");
      if (n > x.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";  
      }
     x[slideIndex-1].style.display = "block";  
   }
</script>

我想在我的網站上添加幻燈片。我正在使用html，css，並希望使用jquery。如何創建響應式圖像幻燈片

問題描述

2 個解決方案

解決方案1
0 2017-06-22 06:31:08

解決方案2
0 2017-06-22 06:37:08

我想在我的網站上添加幻燈片。 我正在使用html，css，並希望使用jquery。 如何創建響應式圖像幻燈片

問題描述

2 個解決方案

解決方案1 0 2017-06-22 06:31:08

解決方案2 0 2017-06-22 06:37:08

我想在我的網站上添加幻燈片。我正在使用html，css，並希望使用jquery。如何創建響應式圖像幻燈片

解決方案1
0 2017-06-22 06:31:08

解決方案2
0 2017-06-22 06:37:08