javascript - 使用 Jquery 在幻灯片中添加下一个/上一个选项
问题描述
我正在尝试使用 jQuery 创建一个画廊,一切正常,但是一旦它们在模式中打开,我无法添加下一个/上一个箭头选项来滑动图像,下面是我正在使用的代码
<img class="myImg" src="images/test1" alt="test1" >
<img class="myImg" src="images/test2" alt="test2">
<img class="myImg" src="images/test3" alt="test3">
<img class="myImg" src="images/test4" alt="test4">
下面是我正在使用的 jQuery 代码
<script>
var modal = document.getElementById('myModal');
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr('src', newSrc);
captionText.innerHTML = this.alt;
});
var span = document.getElementsByClassName("close")[0];
</script>
有没有办法添加下一个/上一个箭头以在模态中打开图像后滑动图像?
解决方案
如何使用插件让您的生活更轻松?
例如,这是一个名为Slide的插件,当然还有很多其他选项,例如Amazing Slider。
如果你真的想自己构建它,你可以点击W3Schools 的这个链接
对于模态框内的滑块,您可以使用Lightbox
这是一个codepen片段
.modal.and.carousel {
position: fixed;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li><a href="#lightbox" data-toggle="modal">Open Lightbox</a></li>
<li><a href="#lightbox" data-toggle="modal" data-slide-to="1">2nd Image</a></li>
<li><a href="#lightbox" data-toggle="modal" data-slide-to="2">3rd Image</a></li>
<li><a href="#lightbox" data-toggle="modal" data-slide-to="15">Open non existing Image</a></li>
</ul>
<div class="modal fade and carousel slide" id="lightbox">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<ol class="carousel-indicators">
<li data-target="#lightbox" data-slide-to="0" class="active"></li>
<li data-target="#lightbox" data-slide-to="1"></li>
<li data-target="#lightbox" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/900x500/777/" alt="First slide">
</div>
<div class="item">
<img src="http://placehold.it/900x500/666/" alt="Second slide">
</div>
<div class="item">
<img src="http://placehold.it/900x500/555/" alt="Third slide">
<div class="carousel-caption">
<p>even with captions...</p>
</div>
</div>
</div>
<!-- /.carousel-inner -->
<a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /.modal-body -->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<!-- /.container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
推荐阅读
- vector - 传递一个向量并对其执行操作会产生 X
- javascript - Heroku 无法为 discord.js 机器人加载画布,说“无效的 ELF 标头”
- c# - 反序列化自定义 XML 时出现 InvalidOperationException(缺少命名空间)
- apache-spark - 如何使用 Livy 在 Dataproc 中包含 BigQuery 连接器
- tensorflow - 使用 resnet50 训练模型时获取 ValueError 和 TypeError
- html - 如何使用边框半径和背景线性渐变创建元素 div 顶部垂直
- java - 自动生成的索引名超过 MySQL 最大命名长度
- javascript - msnodesqlv8 和电子 - SQL SERVER
- java - 此代码片段如何交换队列内容(Java)?
- javascript - 多次切换组件以显示不同的输出