如何在用戶點擊右鍵/左鍵點擊圖片時執行滾動機制javascript

我有一個頁面，我希望用戶能夠通過按右/左圖像箭頭向右/向左滾動。但我不知道如何將可點擊圖像連接到HTML的overflow-x機制以向右/向左滾動。如何在用戶點擊右鍵/左鍵點擊圖片時執行滾動機制javascript

CSS包含的所有圖像，用戶可以滾動

.imgScroll{ 
margin: 0 auto; 
width: 70%; 
overflow-x: scroll; 
overflow-x: hidden; 
white-space:nowrap 
} 

.arrows{(clickable arrows, to scroll right/left) 
position: absolute; 
opacity: 0.5; 
top: 20px; 
cursor: pointer; 
}

PHP，所有圖像都設置爲滾動框

(while loop execute do the following) 
$childImg .= "<img src='../ProductImages/ChildImages/$childName' 
class='imgBotSize' onclick='openNav()'>";

HTML

<div id="botWrapper"> 
    <?php echo "<p1>" . $pDetails . "</p1>"?> 
    <div id="imgBot"> 
     <div id="imgBoxBot"> 
      <div class="arrows" style="right: 180px"> 
       <img src="../arrow-right.png" width="70px" height="70px"> 
       </div> 
       <div class="arrows" style="left: 180px"> 
       <img src="../arrow-left.png" width="70px" height="70px"> 
       </div> 
       <div class="imgScroll"> 
        <?php echo $childImg;?> 
       </div> 
      </div> 
     </div> 
</div>

來源

2017-07-19 Luke DS

這裏有一個很好的圖像傳送帶：http://kenwheeler.github.io/slick/ –

這真的很好，謝謝 –

是的，這是一個措辭良好的問題，因爲很明顯，您正在嘗試創建一個輪播：） –

貌似你試圖創建一個圖像傳送帶。

這裏有一個不錯的圖像傳送帶：kenwheeler.github.io/slick，您可以設置不同的選項以顯示您想要的方式。

來源

2017-07-19 12:20:03

如何在用戶點擊右鍵/左鍵點擊圖片時執行滾動機制javascript

回答

相關問題