用於keyCode和滑塊的ejQuery函數

您是否知道爲什麼我的函數只能在鍵盤上點擊一下？我想用左右箭頭移動滑塊。右箭頭只有一次。我想補充左箭頭也是如此，在我的功能... HTML用於keyCode和滑塊的ejQuery函數

<div class="container slider"> 
    <ul> 
     <li id="slider"><img src="img/slider/1.jpg" alt=""></li> 
     <li id="slider2"><img src="img/slider/2.jpg" alt=""></li> 
     <li id="slider3"><img src="img/slider/3.jpg" alt=""></li> 
     <li id="slider4"><img src="img/slider/4.jpg" alt=""></li> 
    </ul>

CSS

.slideshow { 
    height: 700px; 
    background: #676767; 
} 

.slider { 
    width: 960px; 
    height: 420px; 
    overflow: hidden; 
} 
.slider ul { 
    width: 200%; 
    height: 420px; 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 
.slider li { 
    float: left; 
} 

.slider img { 
    width: 100%; 
    margin: 0 auto; 
    padding-top: 20px; 
}

jQuery的

$(function() { 

    var keyCodeL = 39; 
    var keyCodeR = 37; 

    $('body').keypress(function(){ 
     if(keyCodeL === 39){ 
      $('#slider').animate({'margin-left': -980},800) 
     }else if (keyCodeR === 37){ 
      $('#slider2').animate({'margin-left': -1960 },800) 
     } 
    }) 
});

來源

2017-10-13 Ludovic WEBER

您如果陳述總是真的 –

你在邏輯上是錯誤的。條件應檢查與按鍵。您正在根據自己的價值檢查這些值。對於前：

if(keyCodeL === 39){

總是正確的，因爲你在上面那個var keyCodeL = 39;

你需要檢查，哪個鍵按下

$('body').keypress(function(e){ 
     if(e.keyCode === keyCodeL){ 
      $('#slider').animate({'margin-left': -980},800) 
     }else if (e.keyCode ===keyCodeR){ 
      $('#slider2').animate({'margin-left': -1960 },800) 
     } 
    })

來源

2017-10-13 10:28:50

哦，我明白了！非常感謝你！現在我需要找到如何用左右箭頭移動我的滑塊（四個圖像）。 –

你如果條件是不正確聲明。取而代之的檢查按目前的關鍵，而不是要檢查的變量的值，即keycodeL, keycodeR

你應該如果條件rewirite的，也是我想提一提，使用$(document)而非$(body)

$(document).keypress(function(event) { 
    if (event.charCode == keycodeL){ 
    //Code for left arrow 
    } 
    else if(event.charCode == keycodeR){ 
    //Code for right arrow 
    } 
    });

來源

2017-10-13 10:39:11

用於keyCode和滑塊的ejQuery函數

回答

相關問題