如何在javascript中向幻灯片中添加另一个div？
我正在尝试将选定的图像放入幻灯片放映。然后，幻灯片放映将自动滑动仅选定的图像 下面是我的代码，但我不知道如何添加Javascript来连接图像和幻灯片。现在，当我选择图像时，它显示在图像旁边，而不是幻灯片缩略图上如何在javascript中向幻灯片中添加另一个div？,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试将选定的图像放入幻灯片放映。然后，幻灯片放映将自动滑动仅选定的图像 下面是我的代码，但我不知道如何添加Javascript来连接图像和幻灯片。现在，当我选择图像时，它显示在图像旁边，而不是幻灯片缩略图上 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-
family:helvetica, arial, verdana, sans-serif">
<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<!-- Source: http://www.jssor.com -->
<!-- This code works with jquery library. -->
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jssor.slider-21.1.6.mini.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: true,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Cols: 9,
$SpacingX: 3,
$SpacingY: 3,
$Align: 260
}
};
var jssor_1_slider =
new $JssorSlider$("jssor_1",jssor_1_options);
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
});
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(function(){
var output = $('#output');
//$('#selectlist img').each(function(i, el){
// $(this).addClass('img' + i);
// });
$('#selectlist img').click(function(){
output.append($(this).clone());
});
});
</script>
<style>
/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l (normal)
.jssora02r (normal)
.jssora02l:hover (normal mouseover)
.jssora02r:hover (normal mouseover)
.jssora02l.jssora02ldn (mousedown)
.jssora02r.jssora02rdn (mousedown)
.jssora02l.jssora02lds (disabled)
.jssora02r.jssora02rds (disabled)
*/
.jssora02l, .jssora02r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url('img/a02.png') no-repeat;
overflow: hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }
.jssora02l.jssora02lds { background-position: -3px -33px; opacity:
.3; pointer-events: none; }
.jssora02r.jssora02rds { background-position: -63px -33px; opacity:
.3; pointer-events: none; }
/* jssor slider thumbnail navigator skin 03 css *//*.jssort03 .p
(normal).jssort03 .p:hover
(normal mouseover).jssort03 .pav
(active).jssort03 .pdn
(mousedown)*/.jssort03 .p { position: absolute;
top: 0; left: 0; width: 62px; height: 32px;}.jssort03 .t {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%; border: none;}.jssort03 .w,
.jssort03 .pav:hover .w
{ position: absolute; width: 60px; height: 30px; border:
white 1px dashed; box-sizing: content-box;}
.jssort03 .pdn .w, .jssort03 .pav .w
{ border-style: solid;}.jssort03 .c {
position: absolute; top: 0; left: 0; width: 62px;
height: 32px; background-color: #000; filter:
alpha(opacity=45); opacity: .45; transition: opacity .6s; -
moz- transition: opacity .6s; -webkit-transition: opacity .6s;
-o-transition: opacity .6s;}.jssort03 .p:hover .c, .jssort03 .pav .c
{ filter: alpha(opacity=0); opacity: 0;}.jssort03 .p:hover .c {
transition: none; -moz-transition: none; -webkit-transition:
none; -o-transition: none;}* html .jssort03 .w { width /**/:
62px; height /**/: 32px;}
#output, #selectlist { position: width: 202px; border: 0px solid
#000; margin: 10px; height: 400px; float: left }
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px;
left: 0px; width: 600px; height: 300px; overflow: hidden; visibility:
hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px;
left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position:
absolute; display: block; top: 0px; left: 0px;
width: 100%; height: 100%;"></div>
<div
style="position:absolute;display:block;
background:url('img/loading.gif') no-repeat center
center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top:
0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
<div data-p="112.50">
<img id="34" data-u="image" src="http://placekitten.com/80/80" />
<img id="34" data-u="thumb" src="http://placekitten.com/80/80" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/011.jpg" />
<img data-u="thumb" src="img/thumb-011.jpg" />
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort03"
style="position:absolute;left:0px;bottom:0px;
width:600px;height:60px;" data-autocenter="1">
<div style="position: absolute; top: 0; left: 0; width: 100%;
height:100%; background-color: #000; filter:alpha(opacity=30.0);
opacity:0.3;"></div>
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default;">
<div data-u="prototype" class="p">
<div class="w">
<div data-u="thumbnailtemplate" class="t"></div>
</div>
<div class="c"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora02l"
style="top:0px;left:8px;width:55px;height:55px;"
data-autocenter="2"></span>
<span data-u="arrowright" class="jssora02r"
style="top:0px;right:8px;width:55px;height:55px;" data-
autocenter="2"></span>
</div>
<!-- #endregion Jssor Slider End -->
selected image: <div id="sumcount"></div><br />
<div id="selectlist">
<img id="34" src="http://placekitten.com/80/80" />
<img id="21" src="http://placekitten.com/81/81" />
<img id="11" src="http://placekitten.com/g/80/80" />
<img id="5" src="http://placekitten.com/g/81/81" />
<img id="9" src="http://placekitten.com/g/82/82" />
</div>
<div id="output">
</div>
</body>
</html>
jQuery（文档）.ready（函数（$）{
var jssor_1_选项={
$AutoPlay：对，
$Arrow导航选项：{
$Class:$jssorarrowsnavigator$
},
$ThumbnailNavigator选项：{
$Class:$JSSORTumbnailNavigator$，
$Cols:9，
$SpacingX:3，
$SpacingY:3，
$Align:260
}
};
变量jssor_1_滑块=
新$JssorSlider$（“jssor_1”，jssor_1_选项）；
函数ScaleSlider（）{
var refSize=jssor_1_滑块。$Elmt.parentNode.clientWidth；
如果（参考尺寸）{
参考尺寸=数学最小值（参考尺寸，600）；
jssor_1_滑块。$ScaleWidth（参考尺寸）；
}
否则{
设置超时（ScaleSlider，30）；
}
}
ScaleSlider（）；
$（窗口）.bind（“加载”，ScaleSlider）；
$（窗口）。绑定（“调整大小”，缩放滑块）；
$（窗口）.bind（“方向更改”，缩放滑块）；
/*响应代码端*/
});
$（函数（）{
变量输出=$（“#输出”）；
//$（'#selectlist img'）。每个（函数（i，el）{
//$（this.addClass（'img'+i）；
// });
$（“#选择列表img”）。单击（函数（）{
append（$（this.clone（））；
});
});
/*jssor滑块箭头导航器皮肤02 css*/
/*
.jssora02l（正常）
.jssora02r（正常）
.jssora02l:悬停（正常鼠标悬停）
.jssora02r:悬停（正常鼠标悬停）
.jssora02l.jssora02ldn（鼠标向下）
.jssora02r.jssora02rdn（鼠标向下）
.jssora02l.jssora02lds（禁用）
.jssora02r.jssora02rds（禁用）
*/
.jssora02l、.jssora02r{
显示：块；
位置：绝对位置；
/*箭头元素的大小*/
宽度：55px；
高度：55px；
光标：指针；
背景：url（'img/a02.png'）不重复；
溢出：隐藏；
}
.jssora02l{背景位置：-3px-33px；}
.jssora02r{背景位置：-63px-33px；}
.jssora02l:悬停{背景位置：-123px-33px；}
.jssora02r:悬停{背景位置：-183px-33px；}
.jssora02l.jssora02ldn{背景位置：-3px-33px；}
.jssora02r.jssora02rdn{背景位置：-63px-33px；}
.jssora02l.jssora02lds{背景位置：-3px-33px；不透明度：
.3；指针事件：无；}
.jssora02r.jssora02rds{背景位置：-63px-33px；不透明度：
.3；指针事件：无；}
/*jssor滑块缩略图导航器皮肤03 css*/*.jssort03.p
（正常）.jssort03.p:悬停
（正常鼠标悬停）。jssort03.pav
（活动）.jssort03.pdn
（mousedown）*/.jssort03.p{位置：绝对位置；
顶部：0；左侧：0；宽度：62px；高度：32px；}.jssort03.t{
位置：绝对；顶部：0；左侧：0；
宽度：100%；高度：100%；边框：无；}.jssort03.w，
.jssort03.pav:hover.w
{位置：绝对；宽度：60px；高度：30px；边框：
白色1px虚线；框大小：内容框；}
.jssort03.pdn.w、.jssort03.pav.w
{边框样式：solid；}.jssort03.c{
位置：绝对；顶部：0；左侧：0；宽度：62px；
高度：32px；背景色：#000；过滤器：
alpha（不透明度=45）；不透明度：.45；过渡：不透明度.6s-
moz-transition:opacity.6s；-webkit-transition:opacity.6s；
-o-transition:opacity.6s；}.jssort03.p:hover.c、.jssort03.pav.c
{filter:alpha（不透明度=0）；不透明度：0；}.jssort03.p:hover.c{
转换：无；-moz转换：无；-webkit转换：
none；-o-transition:none；}*html.jssort03.w{width/**/：
62px；高度/**/：32px；}
#输出，#选择列表{位置：宽度：202px；边框：0px实心
#000；边距：10px；高度：400px；浮点：左}
所选图像：