有人可以向我解释如何仅使用JavaScript制作图像滑块（不是jQuery）吗？
我发现了许多解决这个问题的问题，但很难理解答案，并且无法使解决方案有效。我的项目中有滑块，但它们没有动画。相反，它们是每三秒钟更换一次的图像。我希望图像每三秒向左滑动一次。任何人都可以提供一些如何实现这一目标的建议吗？
我的HTML：
<div class="eight columns all">
<img id="img-slide">
<!--<p>>></p> -->
</div>
CSS：
#img-slide{
margin:15px;
height: 95%;
width:95%;
border-radius:5px;
}
JS中的函数：
function slide1(){
document.getElementById('img-slide').src="img/slide_1.jpg";
setTimeout("slide2()", 2500);
}
function slide2(){
document.getElementById('img-slide').src="img/slide_2.jpg";
setTimeout("slide3()", 3000);
}
function slide3(){
document.getElementById('img-slide').src="img/slide_3.jpg";
setTimeout("slide1()", 3000);
}
感谢。
答案 0 :(得分：0)
我认为如果你对逻辑感到困惑，想要一个非常简单的方法来使用图像滑块你应该使用bootstrap。我会给你一个例子伙伴。 Bootstrap是最流行的HTML，CSS和JavaScript框架，用于开发响应迅速的移动优先网站。 Bootstrap完全免费下载和使用！
轮播插件
Carousel插件是循环播放元素的组件，如旋转木马（幻灯片）。
如何创建轮播
以下示例显示了如何创建基本轮播：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
希望能帮到你
答案 1 :(得分：0)
我已经重做你的逻辑来显示图像，注意我不是css的专业，结果几乎是你想要的，图像退出到左边但新图像也来自左边，你可能想要调整css以使其按您想要的方式工作。
这是html：
<div class="eight columns all slider">
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="hide">
<img src="http://images.medicaldaily.com/sites/medicaldaily.com/files/2013/08/04/0/62/6259.jpg" class="hide">
<img src="http://animalia-life.com/data_images/wallpaper/bunny/bunny-01.jpg" class="hide">
</div>
现在每个图像有一个img，请注意添加的类滑块到div
现在对于js，我将所有img放在滑块内，计算要显示的最后一个图像和第一个，然后添加/删除show / hide类到正确的元素。
//This is the latest img, it will serve to know wich img to hide
var old = listPict.length - 1;
//This will represent the current img to show
var current = 0;
//The timeout will recall this function every 3 sec
function loop() {
//We set the class of the current img to show
listPict[current].setAttribute('class', 'show');
//We hide the last img
listPict[old].setAttribute('class', 'hide');
//Update the variables !
old = current;
current++;
//If the current is bigger then the list of images, return to 0
if (current === listPict.length)
current = 0;
//Recall every 3 sec
//Note that we don't put () because we don't want to execute it right away
setTimeout(loop, 3000);
}
loop();
现在我们需要添加css以使转换工作！
<!-- I added position: absolute; -->
<!-- This allow me to use left -->
.slider img{
margin:15px;
height: 95%;
width:95%;
border-radius:5px;
position: absolute;
}
<!-- This show the current image with a transition -->
<!-- It replace the left attribute to 0 and the opacity to 1 -->
.slider img.show{
opacity:1;
left: 0px;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
<!-- This hide the current image with a transition -->
<!-- It move the image to the left and the opacity to 0 -->
.slider img.hide{
left: -1000px;
opacity: 0;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
答案 2 :(得分：0)
我已经很容易地做到了，但是如果横幅很多，它们会变得更大。
let currentBanner;
currentBanner ? currentBanner = currentBanner : currentBanner = 1;
function changeBanner() {
const banner1 = document.getElementById('banner1');
const banner2 = document.getElementById('banner2');
const banner3 = document.getElementById('banner3')
if (currentBanner == 1) {
banner1.style.display = 'none'
banner2.style.display = 'block'
currentBanner++
} else if (currentBanner == 2) {
banner2.style.display = 'none'
banner3.style.display = 'block'
currentBanner++
} else if (currentBanner == 3) {
banner3.style.display = 'none'
banner1.style.display = 'block'
currentBanner = 1;
}
}<div class="flex item" style="margin: 4vw 6vw 0vw 6vw; position: relative;">
<input id="banner2" class="banners" active="true" style="display: none" type="image" src=path></input>
<input id="banner3" class="banners" active="true" style="display: none" type="image" src=path></input>
<input id="banner1" class="banners" active="false" type="image" src=path></input>
</div>