我的幻灯片显示有问题。一切都还可以,但我不能在1分钟内创建一个循环幻灯片。有人帮我解决了这个问题!谢谢 我写了关于幻灯片放映从右到左滑动图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide - Show</title>
<style>
.slideShowImages{
width:600px;
height:420px;
overflow:hidden;
position:relative;
}
img{
width:600px;
}
.slideShowImages .slideShowInner{
display:flex;
position:absolute;
left:0;
transition: left 0.2s ease-out;
}
.next::after , .prev::after{
content: ">";
position:absolute;
top:50%;
right:0;
background:white;
width:1em;
height:3em;
font-weight:bold;
line-height:3em;
font-family:sans-serif;
transform:translateY(-50%);
box-sizing:border-box;
padding:0 0.2em;
opacity:0.25;
transition: opacity 0.2s linear;
}
.prev::after{
left:0;
content: "<";
}
.prev:hover::after, .next:hover::after{
opacity:1;
cursor:pointer;
}
.bubbles{
position:absolute;
bottom:2px;
left:40%;
display:flex;
cursor:pointer;
}
.bubble{
margin:2.5px;
background:#333;
border-radius:100000px;
width:10px;
height:10px;
display:inline-block;
opacity:0.25;
transition: opacity 0.2s linear;
}
.bubble:hover{
opacity:1;
}
.bubble:active{
opacity:1;
}
</style>
</head>
<body>
<div class="slideShowImages">
<div class="slideShowInner">
<img src="http://images.all-free-download.com/images/graphiclarge/abstract_wave_background_310308.jpg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyINr-e7a53DSfGY3o7lPF5xGkyMtIOyYTfpnwy7Ng7E5zD3cs">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRODDVWYLvCUN1ffvwXyAxORulYMSE-bKSCV5mu5uuO2vOoJSSM">
<img src="http://images.all-free-download.com/images/graphiclarge/flower_pink_background_vector_art_148632.jpg">
</div>
<div class="bubbles"></div>
<div class="next"></div>
<div class="prev"></div>
</div>
<script>
let carousels = document.getElementsByClassName('slideShowImages');
[].forEach.call(carousels, function(e){
let next = e.getElementsByClassName('next')[0],
prev = e.getElementsByClassName('prev')[0],
bubbleContainer = e.getElementsByClassName('bubbles')[0],
inner = e.getElementsByClassName('slideShowInner')[0],
imgs = inner.getElementsByTagName('img'),
currentImgIndex = 0,
bubbles = [],
width = 600;
// console.log(inner);
// console.log(imgs);
for(let i = 0; i < imgs.length ; i++){
let b = document.createElement('span');
b.classList.add('bubble');
bubbleContainer.appendChild(b);
bubbles.push(b);
b.addEventListener("click", function (){
currentImgIndex = i;
switchImg();
});
}
function switchImg(){
inner.style.left = -width * currentImgIndex + 'px';
bubbles.forEach(function(b, i){
if(i === currentImgIndex){
b.classList.add('active');
}else{
b.classList.remove('active');
}
});
}
next.addEventListener('click', function(){
currentImgIndex++;
if(currentImgIndex >= imgs.length){
currentImgIndex = 0;
}
switchImg();
});
prev.addEventListener('click', function(){
currentImgIndex--;
if(currentImgIndex < 0){
currentImgIndex = imgs.length - 1;
}
switchImg();
});
});
</script>
</body>
</html>
&#13;