首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >JQuery和Bootstrap:如何将图像列表中的图像添加到旋转木马中?

JQuery和Bootstrap:如何将图像列表中的图像添加到旋转木马中?
EN

Stack Overflow用户
提问于 2016-02-27 17:45:40
回答 1查看 950关注 0票数 0

我是JQuery的新手,我正在制作一个自己制作的旋转木马,其中有一个选择的图片,你想要添加图片到旋转木马点击。

页面左侧有可供选择的图片,旋转木马位于右侧。图像列表的代码如下所示。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="pics">
  <div class="col-sm-4 iu">
    <img src="img/iu.png" alt="IU" class="img-thumbnail" style="width:150px; height:150px;">
  </div>

  <div class="col-sm-4 hyuna">
    <img src="img/hyuna.png" alt="hyuna" class="img-thumbnail" style="width:150px; height:150px;">
  </div>

旋转木马幻灯片的代码是

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="img/minah.png" alt="minah" />
  <div class="carousel-caption">
    <h1>This is Minah.</h1>
  </div>
</div>
<div class="item">
  <img src="img/juwoo.png" alt="juwoo" />
  <div class="carousel-caption">
     <h1>This is Juwoo.</h1>
  </div>

页面从一个已经到位的默认旋转木马开始,当单击列表中的图像时,它应该变成完全空的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-27 18:19:00

给出一个想法,我想它会是这样的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// As the document loads, keep a variable to define that you have not clicked a image.
var image_clicked = false;
$(document).on("click",".img-thumbnail",function(e){
  // Once you click a image on the side.
  var $this = $(e.target)
  // Check the variable
  if(!image_clicked){
    // If not clicked, clear the carousel
    $(".carousel-inner").html("");
    // mark it as clicked, so that the second time you click a image, it wont come to this block.
    image_clicked = true;
  }
    // It will append the new image to the carousel.
    // On the second time you click a image, you will only be appending elements to the carousel.
    // Add item div to the carousel.
    $(".carousel-inner").append("<div class='item'><div class='carousel-caption'><h1></h1></div></div>");
    // Get the added items
    var item = $(".carousel-inner").find(".item");
    // Get the current item and prepend a image to it.
    $(item[item.length-1]).prepend($this);
    // Remove the previous active class that was assigned
    $(".carousel-inner item").each(function(i,it){
      if($(it).hasClass("active")){
        $(it).removeClass("active");
      }
    });
    // Add a active class to the current added item
    $(item[item.length-1]).addClass("active");
    // If you images on the side have a value attribute to them
    // then keep it as caption
    $(item[item.length-1]).find(".carousel-caption h1").html($this.attr("value"));
});

我没有测试过这一点,但它应该类似于你正在努力实现的目标。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35677753

复制
相关文章
jq实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马
打包下载:http://download.csdn.net/detail/u011043843/7994017
全栈程序员站长
2022/07/05
3.7K0
OpenCV 3.1.0中的图像放缩与旋转
OpenCV在3.1.0版本中的图像放缩与旋转操作比起之前版本中更加的简洁方便,同时还提供多种插值方法可供选择。首先来看图像放缩,通过OpenCV核心模块API函数resize即可实现图像的放大与缩小。 一:图像放缩(zoom in/out) 函数resize相关API参数介绍 -src表示输入图像,类型一般是Mat类型 -dst表示输出图像,类型一般是Mat类型 -dsize表示输出图像大小,如果是零的话表示从fx与fy两个参数计算得到 dsize= Size(round(src.cols*fx), r
OpenCV学堂
2018/04/04
2.3K0
OpenCV 3.1.0中的图像放缩与旋转
旋转图像
说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。
木瓜煲鸡脚
2021/01/18
1.3K0
旋转图像
旋转图像\
给定一个 n × n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。
狼啸风云
2023/10/23
2190
旋转图像\
图像旋转
描述 输入一个n行m列的黑白图像,将它顺时针旋转90度后输出。 输入第一行包含两个整数n和m,表示图像包含像素点的行数和列数。1 <= n <= 100,1 <= m <= 100。 接下来n行,每行m个整数,表示图像的每个像素点灰度。相邻两个整数之间用单个空格隔开,每个元素均在0~255之间。输出m行,每行n个整数,为顺时针旋转90度后的图像。相邻两个整数之间用单个空格隔开。样例输入 3 3 1 2 3 4 5 6 7 8 9 样例输出 7 4 1 8 5 2 9 6 3 #include<iostrea
用户1631856
2018/04/12
2K0
图像旋转
问题描述 试题编号: 201503-1 试题名称: 图像旋转 时间限制: 5.0s 内存限制: 256.0MB 问题描述: 问题描述   旋转是图像处理的基本操作,在这个问题中,你需要将一个图像逆时针旋转90度。   计算机中的图像表示可以用一个矩阵来表示,为了旋转一个图像,只需要将对应的矩阵旋转即可。 输入格式   输入的第一行包含两个整数n, m,分别表示图像矩阵的行数和列数。   接下来n行每行包含m个整数,表示输入的图像。 输出格式   输出m行,每行包含n个整数,表示原始矩阵逆时针旋转90度后的矩阵。 样例输入 2 3 1 5 3 3 2 4 样例输出 3 4 5 2 1 3 评测用例规模与约定   1 ≤ n, m ≤ 1,000,矩阵中的数都是不超过1000的非负整数。
geekfly
2022/05/06
9430
opencv图像翻转、图像旋转
淼学派对
2023/10/14
3250
opencv图像翻转、图像旋转
[Python图像处理] 六.图像缩放、图像旋转、图像翻转与图像平移
该系列文章是讲解Python OpenCV图像处理知识,前期主要讲解图像入门、OpenCV基础用法,中期讲解图像处理的各种算法,包括图像锐化算子、图像增强技术、图像分割等,后期结合深度学习研究图像识别、图像分类、目标检测应用。
Eastmount
2021/12/02
5.8K0
[Python图像处理] 六.图像缩放、图像旋转、图像翻转与图像平移
OpenCV旋转图像
M = cv2.getRotationMatrix2D((cx, cy), angle, 1) # 旋转中心,角度degree,放大比例
用户6021899
2023/09/19
2270
OpenCV旋转图像
图像处理: 无损地旋转图像
OpenCV自带的旋转图像方法 (有损) 原图像: 如果用OpenCV自带cv2.warpAffine接口来实现图片旋转: import cv2 # 读取原图像 img = cv2.imrea
JNingWei
2018/09/27
2.7K0
图像处理: 无损地旋转图像
Python如何将图像向右旋转90度
如果直接套用PIL和OpenCV3图像处理库的旋转函数,旋转后保存的图像会留黑边,下面给出我实际测试后旋转图像不留黑边的代码:
嵌入式视觉
2022/09/05
2.1K0
Python如何将图像向右旋转90度
图像旋转矫正
11.0 uint8 3 0.017453292519943295 0.022727272727272728 0.022723360841641067 1.3019526725788753 -88.69804732742112
裴来凡
2022/05/29
7510
图像旋转矫正
【CCF】图像旋转
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
喜欢ctrl的cxk
2019/11/08
7450
图像保真旋转
import cv2 import numpy as np from math import * img=cv2.imread('C:/Users/xpp/Desktop/Lena.png') img[:,:,0]=255 def rotate(image,angle): height, width,channels=image.shape #变换后新图像的大小是原图像旋转后的轮廓外接矩形,注意这个外接矩形的长和高也是水平和竖直的 heightNew=int(width*fabs
裴来凡
2022/05/29
5420
图像保真旋转
Python图像增强(翻转和旋转)
在训练神经网络的时候,经常需要对原始图像做各种各样的增强来增加数据量,最常见的也就是旋转和翻转操作了,实现这两种操作也多种多样,本博客就是来探究不同操作带来的结果
用户7886150
2021/01/05
2.4K0
【图像篇】OpenCV图像处理(七)---图像平移VS图像旋转
牛顿第一运动定律:物体加速度的大小跟作用力成正比,跟物体的质量成反比,且与物体质量的倒数成正比;加速度的方向跟作用力的方向相同。该定律是由艾萨克·牛顿在1687年于《自然哲学的数学原理》一书中提出的。
用户5410712
2022/06/01
1.3K0
【图像篇】OpenCV图像处理(七)---图像平移VS图像旋转
如何将SVG图像使用在HTML网站中
使用PS生成SVG图像用编辑器打开发现是data:img/png;base64而非/path
Din
2018/10/19
4.7K0
如何将SVG图像使用在HTML网站中
图像几何变换(缩放、旋转)中的常用的插值算法
在图像几何变换的过程中,常用的插值方法有最邻近插值(近邻取样法)、双线性内插值和三次卷积法。
chaibubble
2022/05/07
2.3K0
图像几何变换(缩放、旋转)中的常用的插值算法
HTMl网页中的文本和图像
JaneYork
2023/10/11
2080
点击加载更多

相似问题

在Bootstrap旋转木马中拉伸和填充图像

1196

Bootstrap 4β旋转木马中的分层图像

12

Bootstrap旋转木马的图像间距

11

在Bootstrap旋转木马中居中显示图像?

11

Twitter Bootstrap旋转木马图像比率

25
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文