下一個先前的預覽滑塊導航

我有平面設計，我期望編碼HTML和jQuery。我需要爲導航箭頭上的滑塊編寫代碼，以便將鼠標懸停在下一個箭頭上以顯示即將推出的幻燈片或上一個箭頭以顯示上一張幻燈片。如何使用HTML和java-script或jquery查看更多信息，請查找圖像我有設計。下一個先前的預覽滑塊導航

這是我試過的。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <style> 


     .prev, .next{ 
      background-color: #000000; 
      padding: 12px; 
      width: 60px; 
      float: left; 
      cursor: pointer; 
     } 
     .prev-content{ 
      background-color: beige; 
      padding-left: 8px; 
      width: 200px; 
      float: left; 
      height: 92px; 
      display: none; 
      font-family: sans-serif; 
     } 

     .next-content{ 
      background-color: beige; 
      padding-left: 8px; 
      width: 200px; 
      float: left; 
      height: 92px; 
      margin-top: -37px; 
/*   display: none;*/ 
      font-family: sans-serif; 
     } 

     .con{ 
      position: absolute; 
      left: 0px; 
      top:40%; 
     } 

     .con-next, .next-content{ 
      position: absolute; 
      right: 0px; 
      top:40%; 
     } 
     .prev-content img, .next-content img{ 
      float: left; 
      margin-right: 7px; 
     } 


    </style> 

    <title>Siyandza ELP</title> 
</head> 

<body> 
    <div class="con"> 
     <div class="prev"> 
      <img src="images/left-arrow.png" /> 
     </div> 
     <div class="prev-content"> 
      <p><img src="images/image.png" width="40"/> Previous<br />Learning Object Title<br />PDF</p> 
     </div>   
    </div><!-- end prev prev --> 

    <!-- SCRIPTS **********************--> 
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script> 

    <script type="application/javascript"> 

     $(".prev").hover(function(){ 
      $('.prev-content').show(); 
      },function(){ 
       $('.prev-content').hide(); 
      }); 


    </script> 
<!-- <script src="js/sandile.js" type="text/javascript"></script>--> 
</body> 

</html>

感謝

來源

2016-06-13 sandile

你需要建立自己的滑桿播放，或者你可以使用一個包括已經建成？這是一個相當大的項目，你採取了... –

這裏是用純JavaScript基本

function setScr(){ 
 
     imageLeft.setAttribute("src",imageArray[i-1]); 
 
     sliderWrapper.style.backgroundImage = 'url(' + imageArray[i] + ')'; 
 
     imageRight.setAttribute("src",imageArray[i+1]); 
 
    } 
 

 
    var i=0, 
 
     main = document.querySelector("main"), 
 
     imageArray =["http://placekitten.com/500/200","http://placekitten.com/501/200","http://placekitten.com/500/201","http://placekitten.com/499/200","http://placekitten.com/400/600"], 
 
     sliderWrapper= document.createElement("figure"), 
 
     sliderArrowLeft = document.createElement("div"), 
 
     sliderArrowRight = document.createElement("div"), 
 
     imageArrayLength = imageArray.length, 
 
     imageLeft = document.createElement("img"), 
 
     imageRight= document.createElement("img"), 
 
     figureLeft = document.createElement("figure"), 
 
     figureRight= document.createElement("figure"); 
 

 
    sliderWrapper.classList.add("slider-wrapper"); 
 
    sliderArrowLeft.classList.add("sliderArrowLeft","arrow"); 
 
    sliderArrowRight.classList.add("sliderArrowRight","arrow"); 
 

 
    imageLeft.setAttribute("src","undefined"); 
 
    imageRight.setAttribute("src",imageArray[i+1]); 
 

 
    figureLeft.appendChild(imageLeft); 
 
    figureRight.appendChild(imageRight); 
 

 
    sliderArrowLeft.appendChild(figureLeft); 
 
    sliderArrowRight.appendChild(figureRight); 
 

 
    sliderWrapper.appendChild(sliderArrowLeft); 
 
    sliderWrapper.appendChild(sliderArrowRight); 
 

 
    main.appendChild(sliderWrapper); 
 
    sliderWrapper.style.backgroundImage = 'url(' + imageArray[i] + ')'; 
 

 
    document.querySelectorAll(".arrow").forEach(function(e){ 
 

 
    e.addEventListener("click", function(){ 
 
     console.log(imageArray[i-1],i,imageArray[i+1]); 
 
     if(this.classList.contains("sliderArrowLeft") && i > 0){ 
 
      i--;setScr() 
 
     }if(this.classList.contains("sliderArrowRight") && i < imageArrayLength -1){ 
 
      i++;setScr() 
 
     }else{return false} 
 
     
 
    }, false); 
 

 
    });

*{box-sizing:border-box;padding: 0; margin: 0;} 
 
.slider-wrapper{ 
 
    width: 650px; 
 
    height: 320px; 
 
    margin: 20px auto; 
 
    position: relative; 
 
    background: #ebebeb; 
 
    background-size:cover; 
 
    border: 2px solid brown 
 
} 
 

 
.arrow img[src="undefined"]{ 
 
    opacity:0 
 
} 
 
.sliderArrowRight{ 
 
    right: 0; 
 
} 
 
.sliderArrowLeft, .sliderArrowRight{ 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 100px; 
 
    top: 50%; 
 
    margin-top: -50px; 
 
    background: black; 
 
    background-size:cover; 
 
    cursor:pointer; 
 
    transition: all .3s ease; 
 
    overflow:hidden 
 
} 
 
.sliderArrowLeft figure, .sliderArrowRight figure, .sliderArrowLeft:hover, .sliderArrowRight:hover{ 
 
    width: 250px; 
 
} 
 
.sliderArrowLeft figure, .sliderArrowRight figure{ 
 
    position: relative; 
 
    top:0; 
 
    display: block; 
 
    height: 100% 
 
} 
 
.sliderArrowLeft figure{ 
 
    float: left 
 
} 
 
.sliderArrowRight figure{ 
 
    float: right 
 
} 
 
.sliderArrowLeft img, .sliderArrowRight img{ 
 
    position: relative; 
 
    width: 120px; 
 
    height: 80px; 
 
} 
 
.sliderArrowLeft img{ 
 
    margin: 10px 0 0 116px; 
 
} 
 
.sliderArrowRight img{ 
 
    margin: 10px 0 0 12px; 
 
    }

<main></main>

現在你可以用overflow:hidden

來源

2016-06-13 16:20:09

感謝它的工作，但沒有效，因爲它給了我index.html：117未捕獲TypeError：document.querySelectorAll（...）forEach不是一個函數 – sandile

你真的沒有使用任何JavaScript來實現這一目標。只需在你的css標籤之間添加這個。

.con:hover .prev-content{ display:block}

您的箭頭和內容都保留在同一個容器中。因此，只要您將鼠標懸停在該容器上，便會顯示.prev-content。

使用CSS進行這些交互會大大提高網站的性能。您使用的腳本越多，您的網站就會越重。

來源

2016-06-13 13:17:26

下一個先前的預覽滑塊導航

回答

相關問題