我想在幻灯片中添加此箭头(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png)以创建锚点。如何在我创建的幻灯片中添加内部和前部的箭头(我的意思是,使其可见)。这是幻灯片代码:
(function() {
function Slideshow(element) {
this.el = document.querySelector(element);
this.init();
}
Slideshow.prototype = {
init: function() {
this.wrapper = this.el.querySelector(".slider-wrapper");
this.slides = this.el.querySelectorAll(".slide");
this.previous = this.el.querySelector(".slider-previous");
this.next = this.el.querySelector(".slider-next");
this.index = 0;
this.total = this.slides.length;
this.timer = null;
this.nextButton = this.el.querySelector(".next");
this.prevButton = this.el.querySelector(".prev");
this.action();
this.stopStart();
this.nextSlide();
this.prevSlide();
},
_slideTo: function(slide) {
var currentSlide = this.slides[slide];
currentSlide.style.opacity = 1;
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides[i];
if (slide !== currentSlide) {
slide.style.opacity = 0;
}
}
},
action: function() {
var self = this;
self.timer = setInterval(function() {
self.index++;
if (self.index == self.slides.length) {
self.index = 0;
}
self._slideTo(self.index);
}, 10000);
},
stopStart: function() {
var self = this;
self.el.addEventListener("mouseover", function() {
clearInterval(self.timer);
self.timer = null;
}, false);
self.el.addEventListener("mouseout", function() {
self.action();
}, false);
},
nextSlide: function() {
var self = this;
self.nextButton.addEventListener("click", function() {
clearInterval(self.timer);
self.timer = null;
self.index++;
if (self.index == self.slides.length) {
self.index = 0;
}
self._slideTo(self.index);
});
},
prevSlide: function() {
var self = this;
self.prevButton.addEventListener("click", function() {
clearInterval(self.timer);
self.timer = null;
self.index--;
if (self.index == -1) {
self.index = self.slides.length - 1;
}
self._slideTo(self.index);
});
}
};
document.addEventListener("DOMContentLoaded", function() {
var slider = new Slideshow("#main-slider");
});
})();
&#13;
html,
body {
margin: 0;
padding: 0;
}
.slider {
width: 100%;
}
.slider-wrapper {
width: 100%;
height: 600px;
position: relative;
}
.slide {
float: left;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 3s linear;
}
.slider-wrapper>.slide:first-child {
opacity: 1;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 480px) {
img {
max-height: 300px
}
.prev,
.next {
top=30%
}
}
&#13;
<div class="slider" id="main-slider">
<!-- outermost container element -->
<div class="slider-wrapper">
<!-- innermost wrapper element -->
<img src="http://181ge72mb8rnbx7z1k119thi.wpengine.netdna-cdn.com/wp-content/uploads/2017/02/TargheeMusicFestival2014_4510-Cody-Downard-1280x600.jpg" alt="First" class="slide" style="width:100%" />
<!-- slides -->
<img src="http://daltonranch.com/wp-content/uploads/2014/06/golf-1280x600.jpg" alt="Second" class="slide" style="width:100%" />
<img src="http://www.sageaxcess.com/wp-content/uploads/2014/09/Sage-Background-4-1280x600.jpg" alt="Third" class="slide" style="width:100%" />
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
&#13;
有人可以帮助我吗?
谢谢,
约翰