我想添加幻燈片到我的網站。我使用html，css，並且想使用jquery。我如何創建一個響應式圖像幻燈片

這是我迄今爲止。我能夠將圖像保存在容器中，但箭頭不起作用。我想添加幻燈片到我的網站。我使用html，css，並且想使用jquery。我如何創建一個響應式圖像幻燈片

我需要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>

來源

2017-06-22 jeb

請創建的jsfiddle或Codepen你試過的代碼 –

我建議你去通過鏈接

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

幻燈片非常稱爲旋轉木馬。您也可以看看它有內置轉盤支持引導框架

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

來源

2017-06-22 06:31:08

下面是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>

來源

2017-06-22 06:37:08 user8193706

我想添加幻燈片到我的網站。我使用html，css，並且想使用jquery。我如何創建一個響應式圖像幻燈片

回答

相關問題