单击下一张图像时渲染下一张图像？

Question

当用户点击下一张图片时，我希望下一张图片取代当前图片在轮播中的位置。有没有办法做到这一点？我对 jCarouselLite 的配置如下：   var carousalConfig = {            btnNext: '.corousal-nav .right-arrow',            btnPrev: '.corousal-nav .left-arrow',            btnGo:[],            vertical: false,            visible: 2,                        start: 0,            afterEnd: function(a) {                             a.next().css({opacity:.35});                             a.prev().css({opacity:1});                       } $('.carousal-coontainer').jCarouselLite(carousalConfig);html 相同<div class="carousal-coontainer">    <ul>        <li><img src="image/1.jpg"></li>        <li><img src="image/2.jpg"></li>        <li><img src="image/3.jpg"></li>    </ul></div><div>    <div class="carousal_left_arrow"> <span class="left-arrow"> </span></div>    <div class="carousal_right_arrow"> <span class="right-arrow"></span> </div></div>    

Answer 1

jCarouselLite 有一个名为 'go' 的事件，您可以在其中指定要转到的幻灯片，或者（如果不带数字使用）将转到下一张幻灯片。在slider options中，我们可以给需要接收点击事件的元素添加一个类，然后在初始化后给li元素附加一个点击事件。

附带说明：jCarouselLite 很旧，不能与 jQuery 3.0+ 一起使用。有许多提供相同功能的免费替代品

• Slick - jQuery 插件

• Glide.js - 无依赖

• Flickty - jQuery 插件或无依赖项

var carousalConfig = {

  btnNext: ".default .next",

  btnPrev: ".default .prev",

  btnGo: [],

  visible: 2,

  start: 0,

  afterEnd: function(a) {

  // add a class to next element so we can attach click events

    a.next().css({

      opacity: .50

    }).addClass("blurred");

    

    // remove class to remove event attachment

    a.prev().css({

      opacity: 1

    }).removeClass("blurred");

  }

};

$(document).ready(function() {

  let carousel = $('.custom-container');

  carousel.jCarouselLite(carousalConfig);

  // Carousel is initatied so attach click event handler to `.blurred` class

  carousel.on("click", ".blurred", function() {

    carousel.trigger('go');

  })

});

#jcl-demo .carousel {

  border: 1px solid #bababa;

  border-radius: 10px;

  background-color: ghostwhite;

  float: left;

  padding-left: 10px;

  max-width: 100%;

  overflow: hidden;

  /* Needed for rendering without flicker */

  /* position: relative;

  visibility: hidden;

  left: -5000px;*/

}

/* Styling for image based carousel content. Only width and height are mandatory */

#jcl-demo .carousel>ul>li>img {

  width: 150px;

  height: 118px;

  vertical-align: middle;

  /* optional */

  margin: 10px 10px 10px 0;

  border-radius: 5px;

}

/* Styling for text based carousel content. Only width and height are mandatory */

#jcl-demo .carousel>ul>li>p {

  width: 130px;

  height: 98px;

  margin: 10px 10px 10px 0;

  border: 1px solid #808080;

  border-radius: 5px;

  line-height: normal;

  background-color: #fff;

  padding: 10px;

}

/* Styles for PREV and NEXT anchor buttons */

#jcl-demo a.prev,

#jcl-demo a.next,

#jcl-demo a.go {

  display: block;

  width: 26px;

  height: 30px;

  line-height: 1;

  background-color: #333333;

  color: ghostwhite;

  text-decoration: none;

  font-family: Arial, sans-serif;

  font-size: 25px;

  border-radius: 8px;

  float: left;

}

#jcl-demo a.prev.disabled,

#jcl-demo a.next.disabled,

#jcl-demo a.prev.disabled:hover,

#jcl-demo a.next.disabled:hover {

  background-color: #8d8d8d;

  cursor: default;

}

#jcl-demo a.go.highlight {

  background-color: #dedede;

  color: #000;

}

#jcl-demo a.prev {

  margin: 10px 0px 0 0;

  text-indent: 7px;

}

#jcl-demo a.next {

  margin: 10px 0 0 0;

  text-indent: 10px;

}

#jcl-demo a.prev:hover,

#jcl-demo a.next:hover,

#jcl-demo a.go:hover {

  background-color: #666666;

}

/* Additional carousel styles for external controls, slider, widget, mid etc. */

#jcl-demo .externalControl button,

#jcl-demo .imageSliderExt button {

  margin: 5px 5px 0 0;

}

#jcl-demo .externalControl a.next,

#jcl-demo .externalControl a.prev,

#jcl-demo .externalControl a.go,

#jcl-demo .imageSliderExt a.next,

#jcl-demo .imageSliderExt a.prev,

#jcl-demo .imageSliderExt a.go {

  margin: 0 5px 0 0;

  padding: 7px 5px 0 5px;

  font-size: 15px;

  text-align: center;

  border-radius: 3px;

}

#jcl-demo .widget img {

  cursor: pointer;

}

#jcl-demo .mid {

  margin-left: 50px;

  width: 400px;

  height: 300px;

}

#jcl-demo .vertical {

  margin-left: 170px;

}

#jcl-demo .imageSlider .carousel>ul>li>img,

#jcl-demo .imageSliderExt .carousel>ul>li>img {

  width: 400px;

  height: 300px;

}

#jcl-demo .imageSlider .carousel>ul>li>p,

#jcl-demo .imageSliderExt .carousel>ul>li>p {

  width: 380px;

  height: 280px;

}

/* Other common styles */

.clear {

  clear: both;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jcarousellite@1.9.2/jcarousellite.min.js"></script>

<div id='jcl-demo'>

  <div class="custom-container default">

    <div class="carousel">

      <ul>

        <li><img src="https://images.unsplash.com/photo-1560577336-4c9f10bdf48f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>

        <li><img src="https://images.unsplash.com/photo-1566535933277-3849dd2833a6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>

        <li><img src="https://images.unsplash.com/photo-1561552596-f19273aea403?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>

        <li><img src="

      https://images.unsplash.com/photo-1556560302-312e68d6cbd0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" /></li>

      </ul>

    </div>

    <a href="#" class="prev">&lsaquo;</a>

    <a href="#" class="next">&rsaquo;</a>

    <div class="clear"></div>

  </div>

</div>