实现导航点到我的滑块？

Question

我一直在弄乱我的滑块，并且让它自己滑动。问题是，您无法手动查看幻灯片。我想在底部添加导航点，以便您可以浏览幻灯片，而不必在滑块移动时查看它们。如果你能帮助我，这将不胜感激。

我滑块的html：

<div id="slider-container"> 
<div style="position: relative"> 
    <div class="slide"><img id="slide_1" src="images/slide_1.jpg"/></div> 
    <div class="slide"><img id="slide_2" src="images/slide_2.jpg"/></div> 
    <div class="slide"><img id="slide_3" src="images/slide_3.jpg"/></div> 
    <div class="slide"><img id="slide_4" src="images/slide_4.jpg"/></div> 
    <div class="slide"><img id="slide_5" src="images/slide_5.jpg"/></div> 
    <div class="slide"><img id="slide_6" src="images/slide_6.jpg"/></div> 
</div> 
</div> 

我的滑块CSS：

.slide-container { 
display:block; 
} 

.slide { 
top:0; 
width:760px; 
height:420px; 
display:block; 
position:absolute; 
transform:scale(0); 
transition:all .7s; 
} 

.slide img { 
width:100%; 
height:100%; 
border-radius:6px; 
border:1px solid #95ca1a; 
} 

我滑块的javascript：

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

    var count = $(".slide > img").length; 
    var current = 1; 
    var sliderNext = 2; 

    $("img[id^='slide_']").fadeOut(0); 
    $("#slide_" + current).fadeIn(300); 
    var loop = setInterval(function() { 
     $("#slide_" + current).fadeOut(300); 
     $("#slide_" + sliderNext).fadeIn(300); 

     (sliderNext >= count) ? sliderNext = 1 : sliderNext++; 
     (current >= count) ? current = 1 : current++; 
    }, 3000) 
})() 
}); 

这里是什么，我的导航点的意思是一个例子：

CSS Slider - Codepen

Answer 1

首先创建点列表，您可以通过创建“li”标签列表来手动执行，也可以通过jQuery创建列表。

这里是代码

<ol> 
     <li></li> 
     <li></li> 
     <li></li> 
</ol> 

号 “礼” 元素应与图片

的数量则有以下CSS

#slider-container { 
     position:relative; 
     overflow:hidden; 
     width:100%; 
     height:380px; 
     display:inline-block; 
    } 

    .slide { 
     top:0; 
     width:100%; 
     display:inline-block; 

    } 

    .slide img { 
     width:100%; 
     height:100%; 
     border-radius:6px; 
     border:1px solid #95ca1a; 
    } 

/******* css of dots ****/ 
    ol{ 
     list-style= none; 
     width:100%; 
    } 
    ol li{ 
     background: #888; 
     border-radius: 50%; 
     display: inline-block; 
     width:20px; 
     height:20px; 
     cursor: pointer; 
    } 

然后添加下面的jQuery的东西

$('ol li').bind('click', function(){ 

     var index = $(this).index() + 1; 

     $(".active").fadeOut(300); 

     $("#slide_" + index).fadeIn(300);   
     $(".slide").removeClass("active"); 
     $("#slide_" + index).addClass("active"); 
}); 

这个代码会隐藏活动图像，并显示所选择的图像

这里是Fiddle例如

希望它会帮助你

Answer 2

这里是一个旋转木马剧本我写了一个项目。这使您可以点击向前和向后点击。它也是动态的，所以如果你有1个图像，没有点或滚动条，如果你有2个图像，有左右两个条，但没有点，一旦你有三个或更多的图像点将被应用。

JsFiddle

HTML

<div class="carousel-container"> 
    <div class="left-arrow"></div> 
    <div class="right-arrow"></div> 
    <div class="carousel-image-holder"> 
     <img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg" /> 
     <img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg" /> 
     <img src="http://blog.metrotrends.org/wp-content/uploads/2013/09/childPoverty.jpg" /> 
     <img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg" /> 
    </div> 
</div> 
<div class="clear"></div> 
<div class="carousel-buttons-container"> 
    <ul></ul> 
</div> 

CSS

.clear{clear:both;} 

.carousel-container{ 
width: 600px; 
height: 360px; 
float: left; 
margin: 0; 
padding: 0; 
position: relative; 
overflow: hidden; 
} 


.right-arrow{ 
    width: 60px; 
    height: 100%; 
    background-color: rgba(0,0,0,.5); 
    position: absolute; 
    right: 0; 
    margin: 0; 
    padding: 0; 
    z-index: 2; 
} 

.left-arrow{ 
    width: 60px; 
    height: 100%; 
    background-color: rgba(0,0,0,.5); 
    position: absolute; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    z-index: 2; 
} 
.carousel-image-holder{ 
    height:360px; 
    width: 2400px; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    z-index: 1; 
} 

.carousel-image-holder img{ 
    width: 600px; 
    float: left; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
} 

.carousel-buttons-container{ 
    width: 600px; 
    text-align: center; 
    margin: 15px 0 0 0; 
    padding: 0; 
} 

    .carousel-buttons-container ul{ 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
    } 

     .carousel-buttons{ 
      background-color: #dddddd; 
      height: 18px; 
      width: 18px; 
      border-radius: 50%; 
      display: inline-block; 
      margin: 0 10px 0 0; 
      padding: 0; 
      cursor: pointer; 
     } 

     .carousel-buttons:last-of-type{ 
      margin: 0; 
     } 

     .active{ 
      background-color: #e67e22; 
     } 

JQUERY

$(".left-arrow").hide(); 
var numImgs = $('div.carousel-image-holder img').length; 

var addId = numImgs; 



if(numImgs == 2){  
    var clicked = 0; 
    imgCount = numImgs-2; 
}else if(numImgs <= 1){ 
    $(".right-arrow").hide();  
}else{ 
    var clicked = 1;   
    imgCount = numImgs-1; 
} 
if(numImgs > 2){ 
for (var i=0; i<numImgs; i++){ 
$("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>'); 
var addId = addId - 1; 
    } 
}else{ 

} 


$(".carousel-buttons").click(function(){ 

var findIdClicked = $(this).attr("id"); 

var splitString = findIdClicked.split("carousel") 
var findTheNumb = splitString[1]; 

$(".carousel-buttons").removeClass("active"); 
$(this).addClass("active"); 
clicked = parseInt(findTheNumb); 
var adjustNumberforSlide = findTheNumb-1; 

$(".carousel-image-holder").animate({"left": -(600*adjustNumberforSlide)+"px"});   
console.log(clicked); 

if(findTheNumb == 1){ 
    $(".left-arrow").hide(); 
    $(".right-arrow").show(); 
}else if (findTheNumb == numImgs){ 
    $(".right-arrow").hide(); 
    $(".left-arrow").show(); 
}else{ 
    $(".right-arrow").show(); 
    $(".left-arrow").show(); 
} 
}); 


$(".carousel-buttons-container").find("li").first().addClass("active"); 


$(".right-arrow").click(function(){ 

    if (clicked < imgCount){ 

    $(".carousel-image-holder").animate({"left": "-=600px"}); 


     console.log(clicked); 
    }else{ 
    $(".carousel-image-holder").animate({"left": "-=600px"}); 
    $(".right-arrow").hide(); 

     console.log(clicked); 
    } 

    clicked = clicked+1; 
    $(".left-arrow").show(); 
    $(".carousel-buttons").removeClass("active"); 
    $("#carousel"+clicked).addClass("active"); 

}); 

$(".left-arrow").click(function(){ 

    if (clicked > 2){ 

    $(".carousel-image-holder").animate({"left": "+=600px"}); 

     console.log(clicked); 
    }else{ 
    $(".carousel-image-holder").animate({"left": "+=600px"}); 
    $(".left-arrow").hide(); 

     console.log(clicked); 
    } 

    $(".right-arrow").show(); 
    clicked = clicked-1; 
    $(".carousel-buttons").removeClass("active"); 
    $("#carousel"+clicked).addClass("active"); 


}); 

我会收拾间距，只是想获得这个贴