jquery圖像滑塊導航點不會工作

我一直在試圖創建一個jQuery圖像滑塊。到目前爲止，我設法讓圖像滑塊動畫和滑動，當點擊按鈕向前/向後。現在，我正在嘗試創建導航點。到目前爲止，我已經成功嘗試通過動畫/點擊按鈕向前/向後滑動它們。但是當我嘗試單擊這些點以使活動幻燈片顯示時，它將不起作用。這是我的工作（我不把整個代碼只是實現了當你點擊點的功能）jquery圖像滑塊導航點不會工作

這裏是代碼：http://codepen.io/anon/pen/PGmRkR

$(document).ready(function() { 
 
    sliderEvents(); 
 

 
}); 
 
var slides = $("#carousel .slides .slide") 
 
var dots = $(".indicators .circle"); 
 

 
function sliderEvents() { 
 

 
    dots.click(function() { 
 

 
    var indeX = $(this).index(); 
 
    var currentSlide = slides.eq(indeX); 
 
    currentSlide.addClass('active'); 
 
    $(this).addClass('blip'); 
 

 
    currentSlide.prev().removeClass('active'); 
 
    $(this).prev().removeClass('blip'); 
 
    }); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
#container { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
} 
 
header { 
 
    background: black; 
 
    height: 20px; 
 
    padding: 1.5em; 
 
    color: white; 
 
} 
 
#carousel { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 45%; 
 
    margin-top: 15px; 
 
    height: 100%; 
 
} 
 
.slide { 
 
    position: absolute; 
 
    max-width: 100%; 
 
    z-index: 0; 
 
} 
 
.sliderbuttons {} #prev, 
 
#next { 
 
    position: absolute; 
 
    background-color: rgba(255, 148, 41, 0.68); 
 
    box-shadow: 2px white; 
 
    border: none; 
 
    font-size: 2em; 
 
    color: white; 
 
    font-weight: bold; 
 
    /* \t font-family: 'Baloo Tamma', cursive; 
 
    */ 
 
    padding: 10px; 
 
    top: 15%; 
 
    width: 10%; 
 
    /*making the prev,next on top of content*/ 
 
    z-index: 2; 
 
} 
 
#prev { 
 
    left: 0; 
 
} 
 
#next { 
 
    right: 0; 
 
} 
 
.active { 
 
    z-index: 1; 
 
} 
 
.indicators { 
 
    z-index: 2; 
 
    position: absolute; 
 
    bottom: 49%; 
 
    left: 45%; 
 
} 
 
.circle { 
 
    border-radius: 10px; 
 
    width: 10px; 
 
    height: 5px; 
 
    border: 2px solid black; 
 
} 
 
.indicators div { 
 
    padding: 8px; 
 
    margin: 2px; 
 
    display: inline-block; 
 
} 
 
.blip { 
 
    background-color: orange; 
 
} 
 
div.indicators:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Image carousel</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" type="text/css" href="reset.css"> 
 
    <link rel="stylesheet" type="text/css" href="carouselcss.css"> 
 
    <!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> --> 
 

 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <header> 
 
     header is here 
 
    </header> 
 
    <div id="carousel"> 
 
     <div class="sliderbuttons"> 
 
     <input type="button" name="next" id="next" value="&gt;"> 
 
     <input type="button" name="next" id="prev" value="&lt;"> 
 
     </div> 
 
     <div class="slides"> 
 
     <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active"> 
 
     <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide"> 
 
     <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide"> 
 

 
     </div> 
 
     <div class="indicators"> 
 
     <div class="circle blip"></div> 
 
     <div class="circle"></div> 
 
     <div class="circle"></div> 
 
     </div> 
 

 

 
    </div> 
 

 
    </div> 
 
    <script type="text/javascript" src="jquery-1.12.1.js"></script> 
 
    <script type="text/javascript" src="jquery-ui.js"></script> 
 
    <script type="text/javascript" src="carousel.js"></script> 
 

 
</body> 
 

 
</html>

來源

2016-09-26 Ndx

謝謝回覆！這些點適用於一套。就像如果你點擊圈1，幻燈片1出現。但在重新點擊圈1時，幻燈片不顯示。我不確定如何將圈子鏈接到幻燈片。我是新來的JavaScript/jquery – Ndx

你能修理你的jsfiddle，所以我可以幫忙嗎？它不適合我（圖片不會改變點擊） –

jsfiddle似乎缺少一些jQuery庫。我已經把代碼放在這裏http://codepen.io/anon/pen/PGmRkR它應該工作 – Ndx

你必須從每個元素中刪除blip和活動類，因此它們不會堆疊在彼此之上。 Here you go：http://codepen.io/denea/pen/wzdmoY

$(document).ready(function(){ 
sliderEvents(); 
//startSlider(); 

}); 

var slides = $("#carousel .slides .slide"); 
var dots=$(".indicators .circle"); 

function sliderEvents() { 

dots.click(function() { 

var indeX=$(this).index(); 
//console.log(indeX); 
var currentSlide=slides.eq(indeX); 
currentSlide.addClass('active'); 
$(this).addClass('blip'); 

    $(".slides img").not(currentSlide).removeClass('active'); 
    $(".circle").not(this).removeClass('blip'); 
//console.log(currentSlide.prev().index()); 
}); 
}

來源

2016-09-27 00:08:59

它的工作！謝謝:)，是的，這就是我一直在試圖做的事（從以前點擊過的元素中刪除班級blip和活動），但我不知道正確的語法。 – Ndx

好極了，你可以將它標記爲解決方案，以防止它幫助你。 –

jquery圖像滑塊導航點不會工作

回答

相關問題