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>

“li”元素的数量应与图像数量匹配

然后有以下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");


});

我会清理间距，只是想发布这个

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

2 个答案: