Javascript 在我的滑块上实现导航点？

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

我的滑块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>

.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;
}

$(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)
})()
});

我的滑块javascript:

<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>

.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;
}

$(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)
})()
});

下面是我所说的导航点的示例：

<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>

.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;
}

$(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)
})()
});

---

这是我为一个项目编写的旋转木马脚本。这允许您向前和向后单击，也可以单击点。它也是动态的，所以如果你有一个图像，没有点或滚动条，如果你有两个图像，有条去左右，但没有点，一旦你有三个或更多的图像点将应用

HTML

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");


});

$（“.left arrow”）.hide（）；
var numigs=$（'div.carousel-image-holder img'）。长度；
var addId=numgs；
如果（numgs==2）{
var=0；
imgCount=numgs-2；
}否则如果（numImgs 2）{
对于（变量i=0；变量i=2）{
$（“.carousel image holder”）.animate（{“left”：“+=600px”}）；
console.log（单击）；
}否则{
$（“.carousel image holder”）.animate（{“left”：“+=600px”}）；
$（“.left arrow”）.hide（）；
console.log（单击）；
}
$（“.right arrow”）.show（）；
点击=点击-1；
$（“.carousel按钮”）.removeClass（“活动”）；
$（“#旋转木马”+点击）.addClass（“活动”）；
});

---

我将清理间距，只想发布此内容

首先创建点列表，您可以通过创建“li”标记列表手动完成，也可以通过jQuery创建

这是代码

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

然后添加以下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");
});

此代码将隐藏活动图像并显示选定图像

下面是一个例子

---

希望它能帮助你

唉，在未来的许多年里，间隔几乎已经消失了。愿它安息