Question

我正在尝试为我的页面构建一个图像滑块，使用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的显示属性来工作，所以我不知道为什么它不起作用，我试着改变效果的时间，但这并没有解决它。

Jquery Slider效果问题

0 个答案: