在滑塊下方添加導航按鈕

Question

我創建了帶有圖像，文本和鏈接的淡入淡出滑塊。 我想在它下面添加一些導航項目符號以控制圖像。 像這樣： http : //www.parallaxslider.com/preview_images/skins/bullets_skin.jpg

這是滑塊代碼：

HTML

<div class="slides">    

    <div class="slidiv">
<a href="..." ><img src="..." >
        <span> text1 </span></a>
    </div>

    <div class="slidiv">
<a href="..." ><img src="..." >
        <span> text2 </span></a>
    </div>

    <div class="slidiv">
<a href="..." ><img src="..." >
        <span> text3 </span></a>
    </div>

    <div class="slidiv">
<a href="..." ><img src="...">
        <span> text4 </span></a>
    </div>

</div>

CSS

.slides {
overflow:hidden;
top:0;
position:relative;
width:100%;
height:206px;
z-index:920;
border-bottom:white 6px solid;
}

.slides img {
position:absolute;
left:0;
top:0;
}

.slides span {
    position: absolute;
    right: 100px;
    top: 160px;
color:white !important;
font-size:20px;
}

使用Javascript

<script type="text/javascript">
$(function() {
$('.slides .slidiv:gt(0)').hide();

setInterval(function () {
    $('.slides').children().eq(0).fadeOut(2000)
        .next('.slidiv')
        .fadeIn(2000)
        .end()
        .appendTo('.slides');
}, 6000); // 6 seconds
});
</script>

Answer 1

您必須為每張幻燈片定義一個唯一的ID，然后為圈子構建html（確保您可以參考哪個圈子與哪張幻燈片相匹配）。 然后捕獲on click事件，清除間隔，向前循環直到“當前”位置的幻燈片與圓圈匹配，然后再次創建間隔。 當然，每次它向前循環時，您都需要為與活動幻燈片相關聯的圓設置視覺提示。

（ 演示 ）

HTML

<div class="slider">
    <div class="slides">
        <div class="slidiv" id="1">
            <a href="...">
                <img src="http://placehold.it/350x150/3296fa/ffffff">
                <span>text1</span>
            </a>
        </div>
        <div class="slidiv" id="2">
            <a href="...">
                <img src="http://placehold.it/350x150/fa9632/ffffff">
                <span>text2</span>
            </a>
        </div>
        <div class="slidiv" id="3">
            <a href="...">
                <img src="http://placehold.it/350x150/ff3399/ffffff">
                <span>text3</span>
            </a>
        </div>
        <div class="slidiv" id="4">
            <a href="...">
                <img src="http://placehold.it/350x150/33ff99/ffffff">
                <span>text4</span>
            </a>
        </div>
    </div>
    <div class="circles">
        <a href="javascript:void()" class="circle active" id="circle-1" data-moveto="1"></a>
        <a href="javascript:void()" class="circle" id="circle-2" data-moveto="2"></a>
        <a href="javascript:void()" class="circle" id="circle-3" data-moveto="3"></a>
        <a href="javascript:void()" class="circle" id="circle-4" data-moveto="4"></a>
    </div>
</div>

CSS

.circles, .circle {
    display: inline-block;
}
.circles {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.circle {
    padding: 5px;
    border-radius: 100%;
    border: 1px solid #444;
}
.active {
    background: rgb(50, 150, 250);
}

JAVASCRIPT

$(function () {
    $('.slides .slidiv:gt(0)').hide();
    $.fn.setActive = function () {
        if ($(this).hasClass("slider")) {
            $(".active", $(this)).removeClass("active");
            $("#circle-" + $(".slidiv:first-child", $(this),$(this)).attr("id"),$(this)).addClass("active");
            return this;
        }
        return false;
    }
    $.fn.cycleFwd = function(rateStart,rateEnd) {
        if ($(this).hasClass("slider")) {
            $('.slides', $(this)).children()
                .eq(0)
                .fadeOut(rateStart)
                .next('.slidiv')
                .fadeIn(rateEnd)
                .end()
                .appendTo($('.slides', $(this)));
            $(this).setActive($('.slidiv:first-child',$(this)).attr("id"));
            return this;
        }
        return false;
    }
    $.fn.cycleFwdTo = function (id,rate) {
        if($(this).hasClass("slider")) {
            var current = $(".slidiv:first-child", $(this));
            if(current.attr("id") === id) return true;
            var count = id;
            if(current.attr("id") > id) {
                count = Number(current.nextAll().length) + Number(id) + 1;
            }
            if(count - current.attr("id") === 1) {
                $(this).cycleFwd(rate,2000);
            } else {
                $(this).cycleFwd(rate,0);
                $(this).cycleFwdTo(id,0);
            }
            return this;
        }
        return false;
    }
    $(".circle").on("click", function () {
        clearInterval(window.interval);
        var newFirst = $(this).attr("data-moveto");
        $(this).parent().parent().cycleFwdTo(newFirst,2000);
        var self = this;
        window.interval = setInterval(function () {
            $(self).parent().parent().cycleFwd(2000,2000);
        }, 6000); // 6 seconds
    });
    $('.slider').each(function(){
        var self = this;
        window.interval = setInterval(function () {
            $(self).cycleFwd(2000,2000);
        }, 6000); // 6 seconds
    });
});

編輯：

這個答案不是很好，因為它不能很好地解釋它是如何工作的，但這屬於“我可以寫一部小說”，解釋了執行OP要求的所有不同方法以及每種方法的工作原理。 如果其他人想一起來並提供有關此代碼如何工作的更好解釋，我將表示贊同。