Question

如何将标记的气泡链接到JavaScript自动滑块（window.setInterval（功能slideA（）{）？检查代码以了解此问题。幻灯片会自动播放，但气泡只会对点击产生影响。

var imagecount = 1;
var total = 3;

function slide(x) {
	var Image = document.getElementById('img');
	var nodes = document.getElementById('bubbles').getElementsByTagName('div');
        for(var i=0; i<nodes.length; i++) {
        if(i == imagecount-1) {
        nodes[i].style.backgroundColor = '#F86215';
        }
        else {
        nodes[i].style.backgroundColor = 'transparent';    
          }
            }      
	imagecount = imagecount + x;
	if (imagecount > total){ imagecount = 1;}
	if (imagecount < 1){ imagecount = total;}
	Image.src = "IMAGE/img"+ imagecount +".jpg";
	}
	
window.setInterval(function slideA() {
	var Image = document.getElementById('img'); 
	imagecount = imagecount + 1;
	if (imagecount > total){ imagecount = 1;}
	if (imagecount < 1){ imagecount = total;}
	Image.src = "IMAGE/img"+ imagecount +".jpg";
	}, 5000);
	
function selectSlide(slideNumber){
  		imagecount = slideNumber;
  		var Image = document.getElementById('img');
  		Image.src = "IMAGE/img"+imagecount +".jpg";
} 

function selectSlide(slideNumber, divid){
	 	var nodes = document.getElementById('bubbles').getElementsByTagName('div');
		   for(var i=0; i<nodes.length; i++) {
            nodes[i].style.backgroundColor = 'transparent';
        }        
		divid.style.backgroundColor = '#F86215';
  		imagecount = slideNumber;
  		var Image = document.getElementById('img');
  		Image.src = "IMAGE/img"+imagecount +".jpg";
		
		}

#img {
	width: 100%;
	position: relative;
	height: auto;
}
.container-fluid {
	width: 100%;
	height: auto;
	position: relative;
}

.container-fluid #left-arrow .left {
	width: 60px;
	position: absolute;
	top: 31%;
	left: 0px;
}
.container-fluid #right-arrow .right {
	position: absolute;
	top: 31%;
	right: 0px;
	width: 60px;
}

.container #left-arrow .left:hover {
	cursor:pointer;
	cursor: hand;
}
.container #right-arrow .right:hover {
	cursor:pointer;
	cursor: hand;
}

#bubbles{
	width: 120px;
	margin: 0px auto;
	text-align: center;
	top: 80%;
	position: absolute;
	left: 45%;
} 

#bubbles > div{
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 24px 10px 0px 10px;
	background: rgba(0,0,0,.1);
	text-align: center;
	border: 2px solid #F86215;
	border-radius: 100%;
	font-size: 19px;
	text-decoration: none;
	transition: background 0.3s linear 0s;
	cursor: pointer;
}

<div class="container-fluid">
<img src="IMAGE/img1.jpg" alt="" id="img"/>
<div id="left-arrow"><img onClick="slide(-1)" class="left" src="IMAGE/arrow-left.png" alt=""/></div>
<div id="right-arrow"><img onClick="slide(1)" class="right" src="IMAGE/arrow-right.png" alt=""/></div>

<div id="bubbles"> 
<div onclick="selectSlide(1,this)" style="background:#F86215;"></div> 
<div onclick="selectSlide(2,this)"></div> 
<div onclick="selectSlide(3,this)"></div>
</div>
</div>

Answer 1

花了一段时间才得到一个只有JS的答案，但现在就是这样！

更新了HTML

<div id="bubbles">
    <div class="bubble" onclick="selectSlide(1,this)" style="background:#F86215;"></div>
    <div class="bubble" onclick="selectSlide(2,this)"></div>
    <div class="bubble" onclick="selectSlide(3,this)"></div>
</div>

更新了Javascript

window.setInterval(function slideA() {
    var image = document.getElementById('img');
    imagecount = imagecount + 1;
    if (imagecount > total) {
      imagecount = 1;
    }
    if (imagecount < 1) {
      imagecount = total;
    }
    image.src = "IMAGE/img" + imagecount + ".jpg";
    var bubbles = document.getElementsByClassName("bubble");
    var i;
    for(i = 0; i < bubbles.length; i++) {
      bubbles[i].style.backgroundColor = 'transparent';
    }
    document.getElementsByClassName("bubble")[imagecount - 1].style.backgroundColor = '#F86215';
  }, 5000);

JSFiddle

可点击的气泡控件自动幻灯片纯JavaScript

1 个答案: