基本的jQuery-only滑块，在箭头单击时应该在幻灯片之间淡出。
似乎无法弄清楚为什么这个不起作用，因为在使用没有插件的类似方法之前我已经做了类似的。
JSFiddle：https://jsfiddle.net/b988tfna/1/。
我还在JSFiddle的主滑块下方获得了一个推荐滑块的代码，我在调整此滑块的按钮/点时遇到问题，并且还正确调整了它们的大小。高度和宽度设置相同，但它们比它们的宽度更高，并且左/右边距：auto不会集中对齐它们。
宁愿不将这些问题合并到一个帖子中，但我一直试图解决它们几个小时而没有任何解决方案。
感谢。
HTML：
<div class="sliderArrow">
<a href="#" id="prevArrow"><img src="img/prevArrow.png" style="height:85%; width:85%"></a>
</div>
<div id="slider">
<div class="slide activeSlide">
<div class="slideContent">
<h1>Creating Digital Success Stories.</h1>
<h4>Intro | Innovation | Results</h4>
<p>Mauris sed ipsum nisi, Aliquam eget sagittis erat. Nam ut auctor erat. Maecenas sollicitudin dignissim urna, eu elementum ante varius at. Mauris porttitorultrices mauris, eget pretium lorem blandit in. Nulla sollicitudin viverra ante sed venenatis.</p>
<a href="#contactUs" id="enquireButton" class="button" alt="Enquire Now Button" style="position:absolute; margin-top:20px">Enquire Now</a>
</div>
</div>
<div class="slide">
<div class="slideContent">
<h1>Slide 2.</h1>
<h4>Intro | Innovation | Results</h4>
<p style="font-family:'Effra-Light'">Mauris sed ipsum nisi, Aliquam eget sagittis erat. Nam ut auctor erat. Maecenas sollicitudin dignissim urna, eu elementum ante varius at. Mauris porttitorultrices mauris, eget pretium lorem blandit in. Nulla sollicitudin viverra ante sed venenatis.</p>
<a href="#contactUs" id="enquireButton" class="button" alt="Enquire Now Button" style="position:absolute; margin-top:20px">Enquire Now</a>
</div>
</div>
<div class="slide">
<div class="slideContent">
<h1>Slide 3.</h1>
<h4>Intro | Innovation | Results</h4>
<p style="font-family:'Effra-Light'">Mauris sed ipsum nisi, Aliquam eget sagittis erat. Nam ut auctor erat. Maecenas sollicitudin dignissim urna, eu elementum ante varius at. Mauris porttitorultrices mauris, eget pretium lorem blandit in. Nulla sollicitudin viverra ante sed venenatis.</p>
<a href="#contactUs" class="button" alt="Enquire Now Button" style="position:absolute; margin-top:20px">Enquire Now</a>
</div>
</div>
<div class="slide">
<div class="slideContent">
<h1>Slide 4.</h1>
<h4>Intro | Innovation | Results</h4>
<p style="font-family:'Effra-Light'">Mauris sed ipsum nisi, Aliquam eget sagittis erat. Nam ut auctor erat. Maecenas sollicitudin dignissim urna, eu elementum ante varius at. Mauris porttitorultrices mauris, eget pretium lorem blandit in. Nulla sollicitudin viverra ante sed venenatis.</p>
<a href="#contactUs" id="enquireButton" class="button" alt="Enquire Now Button" style="position:absolute; margin-top:20px">Enquire Now</a>
</div>
</div>
</div>
<div class="sliderArrow">
<a href="#" id="nextArrow"><img src="img/nextArrow.png" style="height:85%; width:85%"></a>
</div>
CSS：
#slider
{
margin-left:auto;
margin-right:auto;
width:100%;
height:100vh;
color:#fff;
z-index:2;
padding:100px 0;
}
.slide
{
display:none;
width:100%;
}
.activeSlide
{
display:block;
}
.sliderArrow
{
position:relative;
height:auto;
top:50%;
margin:-200px 10% 0 10%;
z-index:99;
}
.slideContent
{
width:65%;
margin-left:auto;
margin-right:auto;
}
JS：
$(document).ready(function() {
$('#nextArrow').click(function() {
var currentSlide = $('.activeSlide');
var nextSlide = currentSlide.next();
if (nextSlide.length == 0) {
nextSlide = $('.slide').first();
};
currentSlide.fadeOut(1000).removeClass('activeSlide');
nextSlide.fadeIn(1000).addClass('activeSlide');
});
$('#prevArrow').click(function() {
var currentSlide = $('.activeSlide');
var prevSlide = currentSlide.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
};
currentSlide.fadeOut(1000).removeClass('activeSlide');
prevSlide.fadeIn(1000).addClass('activeSlide');
});
};
答案 0 :(得分：0)
<强> CSS
.container {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
right: 5px;
}
.prev {
left: 5px;
}
HTML
<section class="demo">
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="container">
<div style="display: inline-block;">
<img src="https://placeimg.com/400/200/people"/>
</div>
<div>
<img src="https://placeimg.com/400/200/any"/>
</div>
<div>
<img src="https://placeimg.com/400/200/nature"/>
</div>
<div>
<img src="https://placeimg.com/400/200/architecture"/>
</div>
<div>
<img src="https://placeimg.com/400/200/animals"/>
</div>
<div>
<img src="https://placeimg.com/400/200/people"/>
</div>
<div>
<img src="https://placeimg.com/400/200/tech"/>
</div>
</div>
</section>
<div class="explanation">
Building a slideshow like pattern that can accurately cycle through a number of unknown divs, forwards and backwards. Trying to use as little code as possible. Leave a comment if you see a way to do it better!
</div>
<强> JS
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
请尝试以下链接： - https://www.sitepoint.com/web-foundations/making-simple-image-slider-html-css-jquery/
确定。可以尝试此链接： - http://visuallightbox.com/content/30-best-image-sliders-173.html