如何同时使用按钮和过渡/淡入淡出进行自动幻灯片放映？
[英]How can I make an automatic slideshow with both buttons and transition/crossfade?
问题描述
I would like to make a slideshow much like the example seen on https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2 (minus the side arrows). 
我想制作一个幻灯片，就像在https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2上看到的示例一样（减去侧箭头）。 I cannot find a way to create an automatic cross-fade transition while retaining the selection buttons at the bottom. 我找不到在底部保留选择按钮的同时创建自动淡入淡出过渡的方法。
Here is the code given: 这是给出的代码：
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body>
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>
</body>
</html>
Update: 更新：
<style>
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
.mySlides {
border: none;
opacity: 0;
position: absolute;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
.showMe {opacity: 1;}
</style>
<div class="w3-content w3-display-container" style="max-width:800px">
<img id="slideimg0" class="mySlides showMe" src="img_nature_wide.jpg" style="width:100%">
<img id="slideimg1" class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img id="slideimg2" class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
var timer = setInterval(nextImage, 4000);
var curImage = 0;
var numImages = 3;
function nextImage() {
var e;
e = document.getElementById("slideimg" + curImage);
removeClass(e, "showMe");
curImage++;
if (curImage > numImages - 1) {
curImage = 0;
}
e = document.getElementById("slideimg" + curImage);
addClass(e, "showMe");
}
function addClass(elem, name) {
var c = elem.className;
if (c) c += " ";
c += name;
elem.className = c;
}
function removeClass(elem, name) {
var c = elem.className;
elem.className = c.replace(name, "").replace(/\s+/g, " ").replace(/^\s+|\s+$/g, "");
}
</script>
The problem is that I cant get the buttons to funtion 问题是我无法使按钮起作用
3 个解决方案
解决方案1
0 2017-02-27 05:14:22
var slideIndex = 1;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000);
}
//showDivs(slideIndex);
and change you html div, that contains the < and > as 并更改您的html div，其中包含<和>
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
You can take a look at this for more info! 您可以查看此以获得更多信息！
Hope it helps! 希望能帮助到你！
解决方案2
0 已采纳 2017-02-27 05:48:57
Using Bootstrap May be you can solve it easily. 使用Bootstrap也许可以轻松解决它。 try this code with proper script & stylesheet adding....... 尝试使用适当的脚本和样式表添加此代码...。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <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="https://unsplash.it/1200/380/?random" alt="Chania"> </div> <div class="item"> <img src="https://unsplash.it/1200/380/?random" alt="Chania"> </div> <div class="item"> <img src="https://unsplash.it/1200/380/?random" alt="Chania"> </div> <div class="item"> <img src="https://unsplash.it/1200/380/?random" alt="Chania"> </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>
解决方案3
0 2019-10-16 08:04:14
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <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="https://unsplash.it/1200/380/?random" alt="Chania"> </div> <div class="item"> <img src="https://unsplash.it/1200/380/?random" alt="Chania"> </div> <div class="item"> <img src="https://unsplash.it/1200/380/?random" alt="Chania"> </div> <div class="item"> <img src="https://unsplash.it/1200/380/?random" alt="Chania"> </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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何制作带有按钮的自动幻灯片？ - How to make an automatic slideshow with buttons?
我如何使此滑块自动幻灯片放映 - How can i make this slider to automatic slideshow
如何为现有幻灯片制作自动幻灯片 - how can make the automatic slideshow for existing slideshow
如何使用按钮创建自动幻灯片 - How to create an automatic slideshow with buttons
如何在幻灯片放映中淡化图像？ - How to crossfade images in slideshow?
如何使用 arows 自动幻灯片制作幻灯片 - how to make slideshow with arows automatic slideshow
如何制作可以暂停并按下下一个和后退的自动图像幻灯片？ - How do I make an automatic image slideshow that I can pause and press next and backwards?
如何在.js幻灯片中交叉淡化图像 - How to crossfade images in .js slideshow
带有箭头和按钮的自动幻灯片放映 - Automatic Slideshow with Arrows and Buttons
如何在我现有的 html 代码中自动化图像幻灯片。 我需要它同时使用按钮和自动 - How can I automate image slideshow in my existing html code. I need it to work with both, the buttons and automatically
相关标签