循環事件點擊jQuery的同步當前狀態

我試過，但我失敗了，我想表明的箭頭導航下一個滑塊圖像這樣的形象：循環事件點擊jQuery的同步當前狀態

我幾乎取得了預期的效果，但不工作：

如果你在圈內單擊右上方，2號和繼續這項工作，但如果你在前面的圓圈不與滑塊或關係到下一個箭頭同步單擊。

var images = []; 
$('#slider img').each(function() { 
    images.push($(this)); 
    $(this).hide(); 
}); 

var imgcount = images.length; 
var currentItem = 0; 
images[currentItem].show(); 

var imagesrc = $('#slider').children('img').map(function(){ 
    return $(this).attr('src') 
}).get() 


pcounter = imgcount-1; 
$('.setimageleft').css({'background-image': 'url(' + imagesrc[pcounter] + ')',}); 

ncounter = 1; 
$('.setimage').css({'background-image': 'url(' + imagesrc[ncounter] + ')',}); 

var imgglobal = 1; 

$('#next').click(function() { 
    imgglobal++; 
    $('.setimage').css({'background-image': 'url(' + imagesrc[imgglobal] + ')',}); 
    images[currentItem].hide(); 
    currentItem = (currentItem + 1) % imgcount; 
    images[currentItem].show(); 
}); 

$('#prev').click(function() { 
    imgglobal--; 
    $('.setimageleft').css({'background-image': 'url(' + imagesrc[imgglobal] + ')',}); 
    images[currentItem].hide(); 
    if (currentItem > 0) currentItem--; 
    else currentItem = imgcount - 1; 
    images[currentItem].show(); 
});

能否請你告訴我哪裏是錯誤，或者給我的，我怎麼能達到效果的想法，感謝您的閱讀。

來源

2016-10-24 The nothing

如果imgglobal = -1由於聲明'imgglobal - '？你認爲你的代碼仍然有效嗎？ –

如果一組imgglobal = 0，顯示出滑塊圖像的當前狀態，並沿箭頭不能顯示下一圖像。如果imgglobal = -1，則使用前一個但不是下一個箭頭。 –

否。在你的'＃prev'點擊事件中，你只設置'imgglobal - '。如果我連續點擊它，它會變成負面的。然而'imagesrc [-2]'似乎不正確，對嗎？ –

我認爲你應該更好地利用currentItem代替另一個櫃檯，看到以下內容：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style> 
 
    body{ 
 
     margin: 0px; 
 
     padding: 0px; 
 
     overflow:hidden; 
 
    } 
 
    .conta{margin: 0 auto; 
 
    width: 300px; position:relative;} 
 
    .contasli #next, .contasli #prev{ 
 
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0; 
 
    border-radius: 50%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    transition: all 0.3s ease 0s; 
 
    width: 100%; 
 
    } 
 
    .npconta{position:absolute;z-index:3; 
 
    top: 50%; 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    display: block; 
 
    min-height: 70px; 
 
    min-width: 70px; 
 
    overflow: hidden; 
 
    } 
 
    .contasli #prev{background:#ccc;} 
 
    .contasli #next{background:#ccc;} 
 
    .contasli .npconta.left{left:0;} 
 
    .contasli .npconta.right{right:0;} 
 
    #slider img{left: 0; 
 
     position: absolute; 
 
     transition: opacity 1s ease-in-out 0s; 
 
     max-width: 100%; 
 
     width:100%; 
 
     z-index:1;} 
 

 
     .setimage, .setimageleft{background-position: center center; 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    transition: all 0.3s ease 0s; 
 
    width: 100%; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="conta"> 
 
<div id="slider"> 
 
    <img src="http://dummyimage.com/600x400/000/fff&text=1.jpg" alt="" /> 
 
    <img src="http://dummyimage.com/600x400/000/fff&text=2.jpg" alt="" /> 
 
    <img src="http://dummyimage.com/600x400/000/fff&text=3.jpg" alt="" /> 
 
    <img src="http://dummyimage.com/600x400/000/fff&text=4.jpg" alt="" /> 
 
    <img src="http://dummyimage.com/600x400/000/fff&text=5.jpg" alt="" /> 
 
    <br> 
 

 

 
</div> 
 

 
<div class="contasli"> 
 
<div class="npconta left"> 
 
<div id="prev"><div class="setimageleft"></div></div> 
 
</div> 
 

 
<div class="npconta right"> 
 
<div id="next"><div class="setimage"></div></div> 
 
</div> 
 
</div> 
 

 
</div> 
 
    <script> 
 
    var images = []; 
 
    $('#slider img').each(function() { 
 
     images.push($(this)); 
 
     $(this).hide(); 
 
    }); 
 

 
    var imgcount = images.length; 
 
    var currentItem = 0; 
 
    images[currentItem].show(); 
 

 
    var imagesrc = $('#slider').children('img').map(function(){ 
 
     return $(this).attr('src') 
 
    }).get() 
 

 

 
    pcounter = imgcount-1; 
 
    $('.setimageleft').css({'background-image': 'url(' + imagesrc[pcounter] + ')',}); 
 

 
    ncounter = 1; 
 
    $('.setimage').css({'background-image': 'url(' + imagesrc[ncounter] + ')',}); 
 

 
    $('#next').click(function() { 
 
     images[currentItem].hide(); 
 
     currentItem = (currentItem + 1) % imgcount; 
 
     images[currentItem].show(); 
 
     calcButtons(); 
 
    }); 
 

 
    $('#prev').click(function() { 
 
     images[currentItem].hide(); 
 
     if (currentItem > 0) currentItem--; 
 
     else currentItem = imgcount - 1; 
 
     images[currentItem].show(); 
 
     calcButtons(); 
 
    }); 
 
    
 
    function calcButtons(){ 
 
     if(currentItem>0) 
 
      $('.setimageleft').css({'background-image':'url(' + imagesrc[currentItem - 1] + ')',}); 
 
     else 
 
      $('.setimageleft').css({'background-image':'url(' + imagesrc[imgcount-1] + ')',}); 
 
     
 
     if(currentItem<imgcount-1) 
 
      $('.setimage').css({'background-image':'url(' + imagesrc[currentItem + 1] + ')',}); 
 
     else 
 
      $('.setimage').css({'background-image':'url(' + imagesrc[0] + ')',}); 
 
    } 
 
    </script> 
 
</body> 
 
</html>

我也集中在方法calc下按鈕的狀態，所以你並不需要它們進行同步。希望能幫助到你。再見

來源

2016-10-24 13:57:49 Alessandro

非常感謝Alessandro M. –

循環事件點擊jQuery的同步當前狀態

回答

相關問題