javascript - 在我的 slider 下方添加导航按钮

Question

我创建了一个带有图像、文本和链接的淡入淡出 slider 。我想在它下面添加一些导航元素符号来控制图像。像这样 : http://www.parallaxslider.com/preview_images/skins/bullets_skin.jpg

这是 slider 代码:

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(确保您有一种方法来引用哪个圆圈与哪张幻灯片相匹配)。然后捕获点击事件，清除间隔，向前循环直到“当前”位置的幻灯片与圆匹配，然后再次创建间隔。当然，每次向前循环时，您都需要为与事件幻灯片关联的圆圈设置视觉提示。

( Demo )

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 所要求的所有不同方法以及每种方法的工作原理。如果其他人想一起来更好地解释这段代码的工作原理，我会赞成。