我正在尝试为我的页面构建一个图像滑块,使用bootstrap和jquery进行转换,因为我不熟悉CSS。这是我的代码: https://jsfiddle.net/darkbubu/fjv56zwv/
这是我的HTML
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'/>
<link href="css/main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script src="js/Shared/angular.min.js"></script>
<script src="js/effects.js"></script>
<body ng-app="myApp">
<div class="slider">
<div class="container">
<div class="row">
<div class="slide active-slide">
<img src="img/slide1.jpg"/>
<h1>The appropiate device for every job.</h1>
</div>
<div class="slide">
<img src="img/slide2.jpg"/>
<h1>Create the perfect work space for you</h1>
</div>
<div class="slide">
<img src="img/slide4.jpg"/>
<h1>Power up your experience</h1>
</div>
<div class="slide">
<img src="img/slide3.jpg"/>
<h1>Carry your information everywhere</h1>
</div>
</div>
</div>
<div class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"/></div>
<div class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"/></div>
</div>
</body>
我的JS效果文件
var main = function() {
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
}
$(document).ready(main);
最后我的CSS
.slider{
height: 500px;
margin: auto;
position: relative;
}
.slide{
display: none;
//position: absolute;
}
.active-slide{
display: block;
}
.slide img{
width: 100%;
height: 500px;
position: relative;
}
.slide h1{
position: absolute;
top: 200px;
left: 20%;
font-size: 48px;
//width: 100%;
color: white;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
}
.slide span{
padding: 5px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
}
.arrow-next{
position: absolute;
right: 30px;
top:50%;
}
.arrow-prev{
position: absolute;
left: 30px;
top:50%;
}
所以这就是问题,滑块有效,但是效果不太好,因为当新图像出现几秒钟时,前一个图像不会离开屏幕,所以两个图像都在屏幕上同时,它们甚至在页面的其余部分重叠。 它是一个非常简单的滑块,通过改变幻灯片div的显示属性来工作,所以我不知道为什么它不起作用,我试着改变效果的时间,但这并没有解决它。