javascript - 如何添加单击事件以将您带到幻灯片上的某个图像

Question

我有一张包含 3 章数字图书图片的幻灯片。 slider 正在工作，但我如何在 html 中的“章节”div 上添加点击事件，以便当我单击它们时，它会滚动到 slider 中的正确位置。也就是说，如果您单击第 2 章，它会将您带到第 2 章开始的幻灯片。这是使用 jquery。

HTML

<div class="chapters">
    <div class="chapterOne">
            <h3>Stony Brook Medicine</h3>

            <h4>Chapter 1</h4>

    </div>
    <div class="chapterTwo">
            <h3>Stony Brook Childrens</h3>

            <h4>Chapter 2</h4>  
    </div>
    <div class="chapterThree">
            <h3>Working together while standing out</h3>

            <h4>Chapter 3</h4>  
    </div>
</div>
</div>
<div class="sliderContainer">
    <ul>
        <li class="chapterOneSlide">
            <img src="http://placehold.it/875x369/F44D5E"><a class="arrow next">&rang;</a>
        </li>
        <li class="chapterOneSlide">
            <img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterOneSlide">
            <img src="http://placehold.it/875x369/56DC28"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterOneSlide">
            <img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterOneSlide">
            <img src="http://placehold.it/875x369/56DC28"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterOneSlide">
            <img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterOneSlide">
            <img src="http://placehold.it/875x369/56DC28"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterOneSlide">
            <img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterOneSlide">
            <img src="http://placehold.it/875x369/56DC28"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterTwoSlide">
            <img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterTwoSlide">
            <img src="http://placehold.it/875x369/56DC28"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterTwoSlide">
            <img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterTwoSlide">
            <img src="http://placehold.it/875x369/56DC28"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterTwoSlide">
            <img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterThreeSlide">
            <img src="http://placehold.it/875x369/56DC28"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterThreeSlide">
            <img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterThreeSlide">
            <img src="http://placehold.it/875x369/56DC28"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterThreeSlide">
            <img src="http://placehold.it/875x369/CEBAC9"><a class="arrow next">&rang;</a><a class="arrow prev">&lang;</a>
        </li>
        <li class="chapterThreeSlide">
            <img src="http://placehold.it/875x369/E5A470"><a class="arrow prev">&lang;</a>
        </li>
    </ul>
</div>

和 jquery

$(window).load(function () {
    var theImage = $('ul li img');
    var theWidth = theImage.width()
    //wrap into mother div
    $('ul').wrap('<div id="mother" />');
    //assign height width and overflow hidden to mother
    $('#mother').css({
        width: function () {
            return theWidth;
        },
        height: function () {
            return theImage.height();
        },
        position: 'relative',
        overflow: 'hidden'
    });
    //get total of image sizes and set as width for ul
    var totalWidth = theImage.length * theWidth;
    $('ul').css({
        width: function () {
            return totalWidth;
        }
    });


    $(theImage).each(

    function (intIndex) {
        $(this).nextAll('a')
            .bind("click", function () {
            if ($(this).is(".next")) {
                $(this).parent('li').parent('ul').animate({
                    "margin-left": (-(intIndex + 1) * theWidth)
                }, 1000)
            } else if ($(this).is(".prev")) {
                $(this).parent('li').parent('ul').animate({
                    "margin-left": (-(intIndex - 1) * theWidth)
                }, 1000)
            } else if ($(this).is(".startover")) {
                $(this).parent('li').parent('ul').animate({
                    "margin-left": (0)
                }, 1000)
            }
        }); //close .bind()
    }); //close .each()
});

CSS

    .sliderContainer {
    border: 2px solid black;
    width: 875px;
    height: 369px;
    position: relative
}
.sliderContainer:hover .arrow {
    opacity: 1;
    transition: all .5s ease-out;
    -webkit-transition: all .5s ease-out;   
}
.arrow {
    text-align: center;
    line-height: 50px;
    color: #fff;
    width: 50px;
    height: 50px;
    background-color: rgba(183,3,3,0.5);
    cursor: pointer;
    z-index: 99;
    top: 162px;
    position: absolute;
}
.next {
    right: 0;
    opacity: 0;
}
.prev {
    left: 0;
    opacity: 0;
}
ul {
    padding: 0; 
    margin:0;
}
ul li {
  float:left; 
  list-style:none; 
  position:relative; 
}

Answer 1

您也可以只使用 CSS JS Fiddle ，只是将.chapters 内部div 更改为a 标签，并在第一个中设置目标a href="#foo"每张幻灯片的幻灯片 li id="foo" 它将跳转到该章节并带有轻微的淡入淡出效果

CSS:

 :target {
   animation: slideFadeIn 2s ease;
 }
 @keyframes slideFadeIn {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }