嗨,我需要在幻灯片中添加两个箭头,以使用户可以在元素之间来回移动。小提琴:https://jsfiddle.net/piopio1/bs8ph705/#
<div>
<a href="url" target="_blank" class="white-title link">
<div class="mySlides slide-a" style="background-color:#5b1985; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title a" style="text-align: center">slide text!</h1>
</div></a>
<a href="url" target="_blank" class="white-title link">
<div class="mySlides slide-d" style="background-color:#199ED9; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title a">slide text!</h1>
</div></a>
</div>
这里是脚本,我只是js的初学者,因此非常感谢您的帮助!
<script>
var slideIndex = 0;
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, 6000);
}
</script>
您可以尝试这样的https://jsfiddle.net/fbLshu72/3/
<div class="container">
<a href="#" class="arrow left" onclick="carousel(1)"><</a>
<a href="#" class="arrow right" onclick="carousel(1)">></a>
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-auvik" style="background-color:#5b1985; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik" style="text-align: center">slide!</h1>
</div>
</a>
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-datto" style="background-color:#199ED9; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik">slide!</h1>
</div>
</a>
</div>
Css:
.container{
position: relative
}
.white-title {
margin-top: 30px;
margin-bottom: 30px;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
font-family: Lato, sans-serif;
color: #fff;
font-size: 40px;
font-weight: 300;
text-align: center;
}
.white-title.fact {
margin-bottom: 50px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
font-family: Raleway, sans-serif;
color: #fff;
font-size: 80px;
font-weight: 100;
}
.white-title.auvik {
font-style: italic;
font-weight: 900;
}
.white-title.link {
color: #ffffff;
font-style: italic;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
}
.white-title.link:hover {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
.mySlides {
display: none;
padding: 100px;
text-align: center;
height: 250px;
}
.slide-datto,
.slide-datto-hover:hover {
color: #fff !important;
background-color: #199ED9 !important
}
.slide-auvik,
.slide-auvik-hover:hover {
color: #fff !important;
background-color: #5b1985 !important
}
.arrow{
display: block;
position: absolute;
z-index: 2;
text-decoration: none;
top: calc(100%/2);
font-size: 30px;
color: black;
}
.arrow.left{
}
.arrow.right{
right: 0;
}
JS:
var slideIndex = 0;
carousel();
function carousel(inc = 1) {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex += inc;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
}
添加两个以上的幻灯片时,上一个答案无法正常工作。
要修复它,您需要添加代码以正确地反转方向。我通过使用javascript调用解决了]
<a href="#" class="arrow left" onclick="carousel(-1)"></a>
而不是
<a href="#" class="arrow left" onclick="carousel(1)"></a>
用于左指示器。
我还添加了逻辑以检查方向是否相反,并且当前幻灯片是幻灯片1(要求幻灯片索引以反映最后一张幻灯片。
if (slideIndex > x.length) {
slideIndex = 1
} else if (inc == -1 && slideIndex < 1) {
slideIndex = x.length;
}
关于您的原始问题(如何添加箭头以及在何处放置箭头代码):
使用位置“绝对”以及顶部计算器:calc(100%2),您可以确定转盘垂直中途点在哪里。
向右0(带有.arrow.right)使向右箭头停留在轮播的右侧(0表示最右边)。 Z-index指示它应该在圆盘传送带(第二层)之上。
.arrow{
display: block;
position: absolute;
z-index: 2;
text-decoration: none;
top: calc(100%/2);
font-size: 30px;
color: black;
}
.arrow.right{
right: 0;
}
var slideIndex = 0;
carousel(1);
function carousel(inc = 1) {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex += inc;
if (slideIndex > x.length) {
slideIndex = 1
} else if (inc == -1 && slideIndex < 1) {
slideIndex = x.length;
}
x[slideIndex - 1].style.display = "block";
}
.container{
position: relative
}
.white-title {
margin-top: 30px;
margin-bottom: 30px;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
font-family: Lato, sans-serif;
color: #fff;
font-size: 40px;
font-weight: 300;
text-align: center;
}
.white-title.fact {
margin-bottom: 50px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
font-family: Raleway, sans-serif;
color: #fff;
font-size: 80px;
font-weight: 100;
}
.white-title.auvik {
font-style: italic;
font-weight: 900;
}
.white-title.link {
color: #ffffff;
font-style: italic;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
}
.white-title.link:hover {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
.mySlides {
display: none;
padding: 100px;
text-align: center;
height: 250px;
}
.slide-datto,
.slide-datto-hover:hover {
color: #fff !important;
background-color: blue !important
}
.slide-auvik,
.slide-auvik-hover:hover {
color: #fff !important;
background-color: yellow !important
}
.arrow{
display: block;
position: absolute;
z-index: 2;
text-decoration: none;
top: calc(100%/2);
font-size: 30px;
color: black;
}
.arrow.left{
}
.arrow.right{
right: 0;
}
<div class="container">
<a href="#" class="arrow left" onclick="carousel(-1)"></a>
<a href="#" class="arrow right" onclick="carousel(1)"></a>
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-auvik" style="background-color:yellow; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik" style="text-align: center">slide!</h1>
</div>
</a>
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-datto" style="background-color:blue; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik">slide!</h1>
</div>
</a>
<a href="https://stackoverflow.com/questions/61526539/how-to-add-arrows-to-slideshow" target="_blank" class="white-title link">
<div class="mySlides slide-third" style="background-color:green; height: 200px; margin: auto; padding: 50px; text-align: center!important;">
<h1 class="white-title auvik">slide!</h1>
</div>
</a>
</div>