如何在引导转盘中获取当前“活动”图像的src
在引导转盘中获取当前"活动"图像的src，可以通过以下步骤实现：
- 首先，需要在前端页面中定义一个引导转盘的HTML元素，例如一个div容器：
<div id="guide-wheel">
<img src="default.jpg" alt="活动图像">
</div>- 在JavaScript中，可以通过DOM操作获取到该图像元素，并获取其src属性值：
var wheel = document.getElementById("guide-wheel");
var image = wheel.getElementsByTagName("img")[0];
var src = image.src;- 现在，变量src中存储了当前"活动"图像的src属性值，可以根据需要进行进一步处理，例如显示在页面上或者发送到后端进行其他操作。
相关·内容
每次更改时，我都希望在引导转盘中拉出活动映像的src。下面是我现在所拥有的，它适用于第一张图片，但不会在下一张图片触发时改变。
$(document).ready(function() {
$('#galleryCarousel').on('slide.bs.carousel', function () {
var src = $('.active').find('img').attr('src');
alert(src);
});
});
浏览 13提问于2018-03-01得票数 2
我正在尝试让这个ng-repeat循环与引导转盘一起工作，但我理解并且目前在其他地方使用转盘的方式是，只有一个包含图像的div可以被标记为' active‘类，而一个div必须被标记为active，否则转盘将失败。如果标记了多个，它也会失败。一个且只有一个div可以标记为活动。每隔一个div都应该标记为'class=item‘，我该怎么用ng-repeat来实现呢？谢谢。
<div class="carousel" id="slider" style="margin-left: 20px;">
<lab
浏览 0提问于2014-09-10得票数 18
回答已采纳
我正在尝试使用引导转盘，并从示例开始，如下所示：
我已经将测试jpg (1200x480)加载到幻灯片中，但当您调整浏览器的大小时，图像在水平方向上被缩短，而垂直大小保持不变，导致随着浏览器变小，图像的失真越来越大。
我搜索并发现了其他有相同问题或类似问题的人，但没有人提出任何实际有效的建议。
有没有人有办法在bootstrap carousel中保持jpg的图像宽高比？
浏览 1提问于2016-12-22得票数 0
我使用画布在引导转盘图像上做模糊效果。基本上，旋转木马图像被设置为背景大小的封面，因此图像将根据窗口大小进行裁剪。我想对画布图像执行相同的操作。有什么想法吗？非常感谢！
浏览 0提问于2015-10-29得票数 0
2回答
我有一个使用引导转盘的页面。每张幻灯片显示4个div。从每个div中，我们都可以转到有关产品规格的页面。此页有一个按钮，它使用：
$('.goback__button').click(function(){
window.history.back();
return false;
})
要使用滑块返回上一页，请执行以下操作。问题是，当我点击这个按钮时，我想返回到相同的幻灯片(活动幻灯片，活动项目)。现在，它将重定向到第一张幻灯片处于活动状态的页面。
浏览 2提问于2016-12-29得票数 0
2回答
我被要求使活动的轮播图片更改引导选项卡，以便也具有活动的类。我不确定如何做到这一点，并尝试捕获活动的第一个选项卡，然后我需要迭代他们，但不确定如何及时做到这一点与转盘的滑块。这就是我所在的地方：
var activeTab = $('.tabpanel ul li.active');
$('.carousel').on('slide.bs.carousel', function() {
activeTab.next.addClass('.active');
});
代码只是控制台中的错误。
浏览 1提问于2014-12-01得票数 1
我们的团队为我们的首页实现了一个twitter引导转盘。Chrome和Firefox一切正常。然而，当我们在IE8中测试它时，转盘图像被破坏了，并且在IE控制台中抛出的错误是
Controller 'carousel', required by directive 'ngTransclude', can't be found
下面是我们的carousel的代码(在haml中)：
%carousel.featuredTags{'ff-destroy-carousel' => 'true', 'interval&
浏览 3提问于2013-11-22得票数 10
引导转盘是否可扩展以在滑块中显示下一个和前一个图像？
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-ex
浏览 6提问于2013-12-03得票数 10
回答已采纳
1回答
引导转盘间隔更改
、、、
我有一个使用引导转盘的网站。下面是我的代码：
<div id="slider">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<?php
if ($images = get_field('images', $
浏览 1提问于2014-11-05得票数 2
2回答
嘿，伙计们，我试着搜索，但什么也找不到。我正在尝试设置一个有3张图片的twitter引导转盘，一切都很好，直到你尝试向左滑动，当你在图片1上时，看起来“活动”类消失了。要查看现场示例，请访问patfred.se，转到portfolio并单击图像，您将看到旋转木马。
这是我的代码。
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div cl
浏览 0提问于2013-05-13得票数 1
回答已采纳
我正在尝试创建一个引导转盘。所以我使用*ngFor来添加元素和转盘指示器(小圆圈表示当前位置)。
<li data-target="#myCarousel" *ngFor="#item of items; #idx = index" data-slide-to="idx" [class.active]="idx === 0" >
我正在通过class.active="idx === 0“设置活动类条目，它工作得很好。但是当我尝试设置data-slide to = "idx“时，结果不是想要的索引作为数
浏览 3提问于2016-06-10得票数 2
我使用iCarousel作为转盘类型的，并实现了删除功能.I能够删除转盘中的图像，当我试图删除可见屏幕中的任何其他图像时，它被移动到转盘帧并删除。
我需要从原始位置删除图像。
- (void)loadView {
[super loadView];
self.view.backgroundColor = [UIColor blackColor];
carousel = [[iCarousel alloc] initWithFrame:CGRectMake(-130,300, 320, 100)];
carousel.dataSource = sel
浏览 7提问于2012-06-28得票数 0
回答已采纳
1回答
我目前有一个有3个图像的引导转盘，每个图像都有一个我想要的标题，所以当你点击第一个转盘图像上的标题时，图像会变成gif，但它不能使用基本的JavaScript。 我希望plymouthImg更改为permitionImg，当前permitionImg display设置为none!important <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-in
浏览 27提问于2021-05-11得票数 0
回答已采纳
1回答
显示从数据库到引导转盘的多个图像
、、、、
我在一个数据库中有很多图像，我想使用php在引导转盘中显示它。
问题是我是php的新手，所以我碰壁了。让我用代码来解释一下。
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http:
浏览 1提问于2015-05-13得票数 0
1回答
我在PHP中使用循环引导转盘作为网站的标题，当我更改网站页面时，有没有办法保留最后一张幻灯片的记忆？
carousel代码保存在每个页面的顶部(包含在一个PHP文件中)，我使用PHP会话保存变量。
我不知道轮播是如何工作的，我的想法是在每次轮播更改幻灯片时更新变量SESSION中的索引‘’slideNumber‘。请随时向我询问更多细节。
浏览 1提问于2016-12-30得票数 0
我的工作是一个小项目，也是新的引导。当在item:first & item:last具有活动状态时，我被困在产品转盘控件中被禁用(而不是隐藏)。它类似于电子商务网站滑块。
这是我的代码：
浏览 3提问于2015-09-09得票数 0
回答已采纳
我正在尝试使用AngularJS ans UI Bootstrap创建一个轮播。由于UI bootstrap中的carousel只支持图像，因此我想编写自己的指令来支持youtube视频。
我希望视频在视频幻灯片处于活动状态时开始播放，并在幻灯片处于非活动状态时暂停。此外，我想暂停旋转木马时，视频正在播放。到目前为止，我已经完成了第一部分，但是不能暂停carousel，因为我不能访问carousel作用域的pause方法。
我的代码：
HTML
<div carousel interval="5000">
<div slide ng-repeat=&#
浏览 2提问于2013-08-08得票数 0
引导程序版本: 3.3.7
我想在引导转盘中的一张幻灯片中显示多个图像。
我搜索了很多，发现了这个网站的
在示例2中，问题得到了部分解决，即我可以在一张幻灯片中显示多个图像，但本网站中编写的javascript代码正在克隆所有图像，并在最后一次添加一个图像，这不是预期的效果。
$(window).load(function() {
$(".carousel .item").each(function() {
var i = $(this).next();
i.length || (i = $(this).siblings(":first"))
浏览 18提问于2020-06-02得票数 0
我正在尝试添加一个图像到我的引导转盘，但图像不加载。 {% extends 'base.html' %}
{% block html %}
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide&
浏览 16提问于2019-05-31得票数 0
回答已采纳
1回答
我在代码中遇到了这个问题。我想要动态添加图像到引导转盘。我遇到的第一个问题是所有图像都被设置为活动的。第二个问题是左右导航不起作用。谢谢你的回答。
Ajax回调：
success: function (data) {
$(data.ResponseData.Data.fileNames).each(function (index, imageName) {
$("<div class='item active'><img src='/Images/IndexSlideShow/
浏览 0提问于2016-03-30得票数 1
我有一个引导旋转木马，我希望当图像从滑块更改文本(span与class="image-title")，使alt图像的值活动。
例如，如果image1是活动的，则span将与<span>Alt of image 1</span>类似，当图像2处于活动状态时，span将是
<span>Alt of image 2</span>
我怎么能这么做？
演示
浏览 6提问于2014-06-14得票数 0
我正在做一个引导转盘。旋转木马逐个移动每个项目，以便显示所有六个项目。我的问题是：
如何在第一张和最后一张幻灯片上隐藏“上一张”和“下一张”按钮？
浏览 0提问于2017-09-12得票数 0
在我的首页上，我添加了Typo3引导扩展的全屏carousel content元素。我希望在幻灯片上同时显示文本和图像，所以我添加了一个“文本和图像”转盘项目。
然而，我希望文本层叠在图像的顶部，而不是像下面的图像一样放置在文本的下面。
我也希望文本居中，但不确定为什么不居中，因为我使用了与其他轮播项目相同的头类，其中文本中心类是自动添加的，文本居中。
浏览 0提问于2019-10-25得票数 0
1回答
有没有办法将引导转盘标题重新定位到图像的最低部分？CSS如下：
.carousel-caption {
max-width: 100%;
width:100%;
background:rgba(0,0,0,0.5);
position: absolute;
left: 0;
}
浏览 1提问于2017-05-09得票数 0
1回答
我找到这个例子来创建一个包含上一张和下一张图片的引导转盘。
所有图像都是33%，但我希望是这样的：
10% | 80% | 10%.
是否可以修改css，使前一幅和下一幅图像的宽度为10%，使中心图像的宽度为80%？
浏览 0提问于2018-02-12得票数 0
1回答
我已经尝试创建一个引导转盘，即当鼠标进入它滑动，当鼠标离开它停止。它的工作，但我想当我离开鼠标从图像，它将显示第一个image.please帮助我，我该怎么做？
<script type="text/javascript">
$(".carousel-prdt").on("mouseenter",function() {
$(this).carousel('cycle');
}).on("mouseleave", function() {
浏览 1提问于2019-09-06得票数 0
我在一个Angular组件中有一个引导转盘。这些项是用数组中的ngFor加载的。在旋转木马下面我有一些缩略图。我需要做的是，当用户单击一个缩略图时，carousel将收到相同的数组，但被修改为源，具有不同的图像，并且比第一个数组更大，并从不同的索引(下面的缩略图的索引)开始旋转木马，而不是从0开始。问题是当我第一次点击缩略图时(当源代码改变时)，轮播总是从0开始，而不是从我用$('.carousel').carousel(idx)发送的索引开始。我该如何解决这个问题呢？
<div class='carousel-item' *ngFor="let
浏览 0提问于2019-06-11得票数 0
如何清除引导转盘中的指示器？现在我在底部有了文本+指示器。但我只想保存文本，而不保存指示符
我只需要有文字，所以当我点击它们时，图像就会改变。
附言:我想展示屏幕，但我在这里没有足够的名气
浏览 0提问于2014-01-11得票数 0
我是react的新手，正在尝试使用react-multi-carousel构建品牌转盘。图像显示正确，但我想居中显示图像。尝试编写不适用于旋转木马的css。如何才能做到这一点，或者我必须使用其他任何旋转木马？ <Grid item xs={12}>
<Carousel
responsive={responsive}
infinite={true}
arrows={true}>
<Image src={abt.logo_carousel.url}responsive/>
<Image src={abt.l
浏览 36提问于2021-07-19得票数 2
我正在尝试使用JQuery缩放插件()与引导旋转木马，以便旋转木马中的每个图像在悬停时在光标位置放大，但我无法让缩放工作后，添加两个插件在一起，旋转木马工作良好。
我相信这可能是因为旋转木马阻止了悬停事件到达Zoom插件。
下面是我为每个引导转盘项目编写的代码
<div class="item active">
<span class='zoom'>
<img class="img-responsive" src="@Url.Content( Path.Combine( @"
浏览 3提问于2015-02-16得票数 5
回答已采纳
嗨，在我的页面中有三个选项使图片显示在另一个活动中。选项一记忆卡，相机，水平列表的图像视图。由此，用户可以选择什么，但是图像应该显示在下一个activity视图中。请引导我继续前进！我只是打开相机和记忆卡，然后我不知道如何把它发送到下一个活动。
浏览 3提问于2014-02-17得票数 3
回答已采纳
1回答
设置引导转盘
、、、、
我正在使用single bootstrap carousel，并且面临一个问题。轮播有几个项目/图像要显示，并且其中一个项目必须是活动项目。代码如下： <div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="**active item**">…</div>
<div class=
浏览 13提问于2021-01-06得票数 0
1回答
我有一个可以工作的引导转盘。我刚刚意识到，图像甚至在用户可见之前就已经提前加载了。我的问题是我有一个循环的旋转木马列表。使我的页面加载缓慢。有没有办法只加载被请求的图像？通过jquery？
浏览 0提问于2012-04-24得票数 1
回答已采纳
我正在尝试将裁剪的图像位图设置为我的视图中的图像视图。在一个活动中，代码可以工作，但是我如何将它应用到片段中呢？
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)
var result = CropImage.getActivityResult(data)
var uri = result.uri
if (requestCode == Cr
浏览 0提问于2020-11-24得票数 1
3回答
如何将分页作为点添加到现有的引导转盘中。
它需要自动在这些点之间移动。
对此非常陌生，需要一点帮助。
下面是我的代码：
谢谢：)
浏览 1提问于2012-09-05得票数 12
1回答
我目前正在使用我的网站。我的问题是，我不能最大化我的引导转盘的大小。我希望我的网站的输出是整个页面都充满了引导旋转木马，并有一个网站上只有一个导航栏导航菜单。我在carousel代码中操作了<div>和<img>的所有可能属性，比如宽度和高度，但是carousel仍然没有占据整个页面。图像的大小会影响真实的大小吗？
浏览 1提问于2015-06-29得票数 2
1回答
我的网页上有很多图片，所以我使用了惰性加载来帮助提高性能。我使用了一个25kb的图像作为所有高清图像的占位符。通常情况下，当滚动惰性加载图像进入视图时会立即显示，但是这些图像位于转盘中，并且只有第一个图像会发生变化。我希望点击一个按钮，这个按钮也会显示我可以按类加载新图像的传送带？
<img src="./img/tinyBlur.jpg" data-2x-1="./img/design7.png" class="carosuelImg lazyload-2x loading-lazy hidden">
浏览 0提问于2019-08-31得票数 0
1回答
我想做一个幻灯片放映轮播，以显示来自图库xml文件的图像。
但我有13个xml文件库，我想随机显示这些库。我在考虑使用弹性幻灯片转盘。
希望我有可能完成我的考试项目。
浏览 2提问于2013-08-15得票数 0
1回答
我想在Prestashop模板中使用引导转盘。我发现在prestashop bootstrap中禁用了carousel。有什么方法可以启用轮播吗？我尝试使用以下代码：
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
浏览 1提问于2016-12-09得票数 0
我正在尝试让引导转盘显示在转盘两侧的控制箭头中，因为默认情况下它们会重叠到图像中。
下面是我正在做的一个例子：
理想情况下，我希望它看起来像
向左箭头向右箭头
<div class="span2">
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
</div>
<div class="carousel slide span8" id="myCar
浏览 1提问于2013-02-09得票数 0
回答已采纳
2回答
我对我的产品视图有一个问题。我想展示产品数据。每个产品都是一个带有图像和文本的“盒子”。我想在一个展板上展示六种产品。事实上，我有很多产品，我想有一个“旋转木马一样的看法”。我的想法是这样的:在一个面板上放置6个产品。加载3个面板，并将每个面板作为一个旋转木马项目，以便我可以滑动到另一个“页面”。
为了节省性能，我尝试在转盘中始终只有3个项目。活动的“页面”和之前的页面，以及之后的页面，这样我就可以向左/向右滑动，下一页就可以加载了。
我试图把我的逻辑放在转盘的"onActiveItemChange"-Listener中，但是我在添加/删除转盘项目时遇到了大量的问题。所以我的问
浏览 0提问于2013-02-05得票数 1
回答已采纳
3回答
我有3个映像，每个映像都有相同的id/类(我都尝试过了)，单击时我想得到我单击的图像的src，而不是第一个映像的src。
我试过使用Id，类，img元素，这个。似乎什么都不起作用
元素的父元素中有更多的代码，但这全部是为了外观。
<img src="_IMAGE_SRC_" class="card-img-top img-fluid webImg"/>
<img src="_IMAGE_SRC_" class="card-img-top img-fluid webImg"/>
<img src=&#
浏览 4提问于2019-05-16得票数 0
回答已采纳
5回答
引导更改轮播高度
、、
我这里有一个jsfiddle - http://jsfiddle.net/gh4Lur4b/8/ 这是一个全宽引导转盘。 我想改变高度，但仍然保持全宽。 是由图像高度确定的高度。 我怎样才能改变旋转木马的高度并保持100%的宽度。
浏览 87提问于2015-02-19得票数 25
回答已采纳
2回答
我想使用旋转木马滚动通过不同的图片作为投资组合网站的一部分，在“我的工作”部分。我使用Bootstrap网格系统将工作分成两列:一列用于图像，另一列用于作品描述。其HTML如下所示：
`
<div class="container" id="work-container">
<div class="row">
<div class="col image-container" id="qc-image">
<i
浏览 0提问于2017-12-28得票数 0
我开始在我的网站上应用bootstrap。我需要更改以下脚本以在引导转盘上工作
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
alert('hash'+window.location.hash);
startS
浏览 1提问于2013-07-22得票数 0
假设我们的项目中的映像文件夹中有图像，则它托管在www.abc.com上。
如果必须访问图像，则写入图像路径。
img src=“www.abc.com/映像/Imagename.jpg”alt=“
我多次看到图像路径显示在子域上，比如www.static.abc.com。
img src="www.static.abc.com/imagename.jpg“alt="”
但是图像文件夹存在于www.abc.com中。
怎么可能？
请引导我。
谢谢
浏览 5提问于2015-10-12得票数 0
我只是在一个网站上使用一个小的引导转盘，但它的行为有点奇怪。第一个图像以正确的大小显示，但随后的每个图像都显示为半个大小，在适当调整大小之前，在容器顶部居中约半秒。在达到一个挫败点后，我希望有人能给我指出正确的方向，为什么它会表现成这样。
浏览 5提问于2018-07-15得票数 0
如果你要让我参考这个：Bootstrap Carousel not working after adding items dynamically with jQuery，这个人所做的是不同的。 我正在从外部js文件中的javascript变量中获取3个图像的路径，并通过使用jquery添加src属性来将它们添加到引导转盘中的img元素中。 这是外部文件中的javascript变量： var bobmarley =
{
"id": "05",
"name": "Bob Marley Museum",
"location
浏览 29提问于2020-07-16得票数 1
回答已采纳
当我之前包含bootstrap.min.js时，我的引导转盘和导航栏中的下拉菜单似乎不起作用
以下是我的代码
<link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="bootstrap/dist/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/j
浏览 4提问于2017-07-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
