Question

我正在制作一个新的自动幻灯片，下面是矩形。我想要实现的是黑色纯色，标记着彩色矩形，因此访问者知道当时显示的是哪张幻灯片。

正如您可能会看到我添加了style.border，但黑色纯色不会跟随幻灯片。当显示2e幻灯片时，第二个矩形应标有黑色纯色等。

那里的任何人都知道如何解决这个问题。

var imagecount = 1;
var total = 4;
	function chgBubbleColorMiband(){
	var nodes = document.getElementById('bubbles-miband').getElementsByTagName("div");
	for(var i=0; i<nodes.length; i++){
	if (i == imagecount-1){
	nodes[i].style.borderColor = '#000000';
	}
	else {
	nodes[i].style.borderColor = 'transparent';
	}
	}
}

function slide(x){
	var Image = document.getElementById('imgmiband');
	imagecount = imagecount + x;
	if (imagecount > total){imagecount = 1;}
	if (imagecount < 1){ imagecount = total;}
	Image.src = "Img/miband"+ imagecount +".jpg";
	chgRectangleColorMiband();
}

window.setInterval(function slideA(x) {
var Image = document.getElementById('imgmiband');
if (imagecount > total){imagecount = 1;}
if (imagecount < 1) { imagecount = total;}
Image.src = "Img/miband"+ imagecount +".jpg";
chgRectangleColorMiband();
}, 5000);

function selectSlide(slideNumber){
	imagecount = slideNumber;
	var Image = document.getElementById('imgmiband')
	Image.src = "Img/miband"+imagecount +".jpg";
	chgRectangleColorMiband();
}

@media (min-width: 767px){
#rectangle-miband{
	width: auto;
	margin: 0px auto;
	text-align: center;
	top: 90%;
	position: absolute;
	left: auto;
	height: auto;
	right: auto;
	display: block;
}
}

#rectangle-miband > div{
	display: inline-block;
	width: 30px;
	height: 14px;
	margin-top: 24px;
	margin-right: 14px;
	margin-left: 14px;
	margin-bottom: 0px;
	background: rgba(0,0,0,.1);
	text-align: center;
	border-width: 1px ;
	border-style: solid;
	border-color: transparent;
	font-size: 17px;
	transition: background 0.3s linear 0s;
	cursor: pointer;
	text-decoration: none;
}

<div id="mi-band">
<img src="Img/miband1.jpg" alt="" id="imgmiband"/>

<div id="rectangle-miband">
<div onclick="selectSlide(1, this);" style="background:#4AB706;"></div>
<div onclick="selectSlide(2, this);" style="background:#FF52BD;"></div>
<div onclick="selectSlide(3, this);" style="background:#00B99F;"></div>
<div onclick="selectSlide(4, this);" style="background:#F86215;"></div>
</div>
</div>

Answer 1

你可以用这种方式改变你的边框：

nodes[i].style.border = "solid '#000000' 4px";

Answer 2

我认为除了CSS部分你的代码没问题。尝试从

更改边框定义

   border: 1px solid transparent;

到：

    border-width: 1px;
    border-style: solid;
    border-color: transparent;

这应该有帮助。在此更改之前，您只需覆盖边框css属性。

Answer 3

你有两个错别字！
第4行
getElementbyId - ＆gt; getElementById

和
var Image = document.getElemenById（'imgmiband'） - ＆gt; getElementById

使用Google Chrome的控制台来帮助调试您的javascript，这应该很容易捕获;）。

var imagecount = 1;
var total = 4;
	function chgRectangleColorMiband(){
	var nodes = document.getElementById('rectangle-miband').getElementsByTagName("div");
    console.log(nodes);
	for(var i=0; i<nodes.length; i++){
	if (i == imagecount-1){
	nodes[i].style.borderColor = '#000000';
	}
	else {
	nodes[i].style.borderColor = 'transparent';
	}
	}
}
	
function slide(x){
	var Image = document.getElementById('imgmiband');
	imagecount = imagecount + x;
	if (imagecount > total){imagecount = 1;}
	if (imagecount < 1){ imagecount = total;}
	Image.src = "Img/miband"+ imagecount +".jpg";
	chgRectangleColorMiband();
}

window.setInterval(function slideA(x) {
var Image = document.getElementById('imgmiband');
if (imagecount > total){imagecount = 1;}
if (imagecount < 1) { imagecount = total;}
Image.src = "Img/miband"+ imagecount +".jpg";
chgRectangleColorMiband();
}, 5000);

function selectSlide(slideNumber){
	imagecount = slideNumber;
	var Image = document.getElementById('imgmiband')
	Image.src = "Img/miband"+imagecount +".jpg";
	chgRectangleColorMiband();
}

@media (min-width: 767px){
#rectangle-miband{
	width: auto;
	margin: 0px auto;
	text-align: center;
	top: 90%;
	position: absolute;
	left: auto;
	height: auto;
	right: auto;
	display: block;
}
}

#rectangle-miband > div{
	display: inline-block;
	width: 30px;
	height: 14px;
	margin-top: 24px;
	margin-right: 14px;
	margin-left: 14px;
	margin-bottom: 0px;
	background: rgba(0,0,0,.1);
	text-align: center;
	border: 1px solid transparent;
	font-size: 17px;
	transition: background 0.3s linear 0s;
	cursor: pointer;
	text-decoration: none;
}

<div id="mi-band">
<img src="Img/miband1.jpg" alt="" id="imgmiband"/>

<div id="rectangle-miband">
<div onclick="selectSlide(1, this);" style="background:#4AB706;"></div>
<div onclick="selectSlide(2, this);" style="background:#FF52BD;"></div>
<div onclick="selectSlide(3, this);" style="background:#00B99F;"></div>
<div onclick="selectSlide(4, this);" style="background:#F86215;"></div>
</div>

如何在JavaScript中实现实体边框

3 个答案: