javascript - 单击下一张图像时渲染下一张图像?
问题描述
当用户点击下一张图片时,我希望下一张图片将在轮播中取代当前图片。有没有办法做到这一点?
我对 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>
解决方案
jCarouselLite 有一个名为“go”的事件,您可以在其中指定要转到的幻灯片,或者(如果不使用数字)将转到下一张幻灯片。在滑块选项中,我们可以为需要接收点击事件的元素添加一个类,然后在初始化后将点击事件附加到 li 元素。
附带说明:jCarouselLite 很旧,不能与 jQuery 3.0+ 一起使用。有许多提供相同功能的免费替代品
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">‹</a>
<a href="#" class="next">›</a>
<div class="clear"></div>
</div>
</div>
推荐阅读
- python - 如何在python中保存单个键的多个值
- java - Java,创建一个条件语句,如果元素的名称与输入都不匹配,则发送消息?
- android - 如何使启动画面的图像适合所有手机屏幕尺寸?
- java - 如何在 Java 中处理冲突的依赖关系
- sql - 从一个包含两种类型数据的表中减去一列
- gekko - 我如何使用 gekko python 通过操纵水箱的入口流量来控制 cstr 水箱的液位?- 第 2 部分
- heroku - Google OAuth 重定向 URL 和 Heroku
- javascript - 达到浏览器高度时垂直对齐内容和滚动框
- typescript - React 测试库的实用函数的返回类型
- php - Laravel 6 - 在提交退货登记表上登记