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

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&nbsp;- jQuery 插件Glide.js&nbsp;- 无依赖Flickty&nbsp;- jQuery 插件或无依赖项var carousalConfig = {&nbsp; btnNext: ".default .next",&nbsp; btnPrev: ".default .prev",&nbsp; btnGo: [],&nbsp; visible: 2,&nbsp; start: 0,&nbsp; afterEnd: function(a) {&nbsp; // add a class to next element so we can attach click events&nbsp; &nbsp; a.next().css({&nbsp; &nbsp; &nbsp; opacity: .50&nbsp; &nbsp; }).addClass("blurred");&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // remove class to remove event attachment&nbsp; &nbsp; a.prev().css({&nbsp; &nbsp; &nbsp; opacity: 1&nbsp; &nbsp; }).removeClass("blurred");&nbsp; }};$(document).ready(function() {&nbsp; let carousel = $('.custom-container');&nbsp; carousel.jCarouselLite(carousalConfig);&nbsp; // Carousel is initatied so attach click event handler to `.blurred` class&nbsp; carousel.on("click", ".blurred", function() {&nbsp; &nbsp; carousel.trigger('go');&nbsp; })});#jcl-demo .carousel {&nbsp; border: 1px solid #bababa;&nbsp; border-radius: 10px;&nbsp; background-color: ghostwhite;&nbsp; float: left;&nbsp; padding-left: 10px;&nbsp; max-width: 100%;&nbsp; overflow: hidden;&nbsp; /* Needed for rendering without flicker */&nbsp; /* position: relative;&nbsp; visibility: hidden;&nbsp; left: -5000px;*/}/* Styling for image based carousel content. Only width and height are mandatory */#jcl-demo .carousel>ul>li>img {&nbsp; width: 150px;&nbsp; height: 118px;&nbsp; vertical-align: middle;&nbsp; /* optional */&nbsp; margin: 10px 10px 10px 0;&nbsp; border-radius: 5px;}/* Styling for text based carousel content. Only width and height are mandatory */#jcl-demo .carousel>ul>li>p {&nbsp; width: 130px;&nbsp; height: 98px;&nbsp; margin: 10px 10px 10px 0;&nbsp; border: 1px solid #808080;&nbsp; border-radius: 5px;&nbsp; line-height: normal;&nbsp; background-color: #fff;&nbsp; padding: 10px;}/* Styles for PREV and NEXT anchor buttons */#jcl-demo a.prev,#jcl-demo a.next,#jcl-demo a.go {&nbsp; display: block;&nbsp; width: 26px;&nbsp; height: 30px;&nbsp; line-height: 1;&nbsp; background-color: #333333;&nbsp; color: ghostwhite;&nbsp; text-decoration: none;&nbsp; font-family: Arial, sans-serif;&nbsp; font-size: 25px;&nbsp; border-radius: 8px;&nbsp; float: left;}#jcl-demo a.prev.disabled,#jcl-demo a.next.disabled,#jcl-demo a.prev.disabled:hover,#jcl-demo a.next.disabled:hover {&nbsp; background-color: #8d8d8d;&nbsp; cursor: default;}#jcl-demo a.go.highlight {&nbsp; background-color: #dedede;&nbsp; color: #000;}#jcl-demo a.prev {&nbsp; margin: 10px 0px 0 0;&nbsp; text-indent: 7px;}#jcl-demo a.next {&nbsp; margin: 10px 0 0 0;&nbsp; text-indent: 10px;}#jcl-demo a.prev:hover,#jcl-demo a.next:hover,#jcl-demo a.go:hover {&nbsp; background-color: #666666;}/* Additional carousel styles for external controls, slider, widget, mid etc. */#jcl-demo .externalControl button,#jcl-demo .imageSliderExt button {&nbsp; 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 {&nbsp; margin: 0 5px 0 0;&nbsp; padding: 7px 5px 0 5px;&nbsp; font-size: 15px;&nbsp; text-align: center;&nbsp; border-radius: 3px;}#jcl-demo .widget img {&nbsp; cursor: pointer;}#jcl-demo .mid {&nbsp; margin-left: 50px;&nbsp; width: 400px;&nbsp; height: 300px;}#jcl-demo .vertical {&nbsp; margin-left: 170px;}#jcl-demo .imageSlider .carousel>ul>li>img,#jcl-demo .imageSliderExt .carousel>ul>li>img {&nbsp; width: 400px;&nbsp; height: 300px;}#jcl-demo .imageSlider .carousel>ul>li>p,#jcl-demo .imageSliderExt .carousel>ul>li>p {&nbsp; width: 380px;&nbsp; height: 280px;}/* Other common styles */.clear {&nbsp; 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'>&nbsp; <div class="custom-container default">&nbsp; &nbsp; <div class="carousel">&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; <li><img src="&nbsp; &nbsp; &nbsp; 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>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; &nbsp; <a href="#" class="prev">&lsaquo;</a>&nbsp; &nbsp; <a href="#" class="next">&rsaquo;</a>&nbsp; &nbsp; <div class="clear"></div>&nbsp; </div></div>