Question

我希望你在这美好的一天都很好。我制作了幻灯片，但此时它没有响应，即没有缩小浏览器窗口。

这是因为我在css中的高度和宽度声明，但当我将它们更改为百分比时，它会阻止我的幻灯片显示工作。任何人都可以提供的任何提示或提示都将非常感激。

我的HTML：

     <div id="slideShow">
 <div id="slideShowWindow">
 <div class="slide">
<img src="../Images/golden.jpg"/>
 <div class="slideText">
 <h2>Golden pearl</h2> 
 <p>This golden pearl came from a farm in the south china sea</p>
 </div> <!-- </slideText> -->
 </div>
      <!-- </slide> repeat as many times as needed --> 
     <div class="slide">
         <img src="../Images/zen.jpg"/> 
 <div class="slideText">
 <h2>Simply Zen</h2> 
 <p>What else is there to say?!</p>
 </div> <!-- </slideText> -->
 </div>
      <!-- </slide> repeat as many times as needed --> 
     <div class="slide">
 <img src="../Images/rain.jpg"/>
 <div class="slideText">
 <h2>Lariat In 'Rain'</h2> 
 <p>Lariat In 'Rain' motif using diamonds, white gold, Tahitian pearls, and silk.</p>
 </div> <!-- </slideText> -->
 </div>
      <!-- </slide> repeat as many times as needed --> 
 </div> <!-- </slideShowWindow> -->
 </div> <!-- </slideshow> -->

我的css：

img {
    display: block;
    width: 100%;
    height: auto;
}
p{
    background:none;
    color:#ffffff;
}
#slideShow #slideShowWindow {
    width: 650px;
    height: 450px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow:hidden;
    margin-left: auto;
    margin-right:auto;
}

#slideShow #slideShowWindow .slide {
        margin: 0;
        padding: 0;
        width: 650px;
        height: 450px;
        float: left;
        position: relative;
        margin-left:auto;
        margin-right: auto;
    }

#slideshow #slideshowWindow .slide{
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;


    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}

.slideText {
    background: rgba(128, 128, 128, 0.49);
    text-align:center;
    bottom:0;
    padding:10px;
}



#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
    display: block;
    text-indent: -10000px;
    position: absolute;
    cursor: pointer;
}
#leftNav {
    left: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    background-image: url("../Images/plus_add_minus.png");
    background-repeat: no-repeat;
    z-index: 10;
}
#rightNav {
    right: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    background-image: url("../Images/plus_add_green.png");
    background-repeat: no-repeat;
    z-index: 10;
}
.hiding{
    display:none;
}
.showing{
    display:block;
}

我的jQuery：

$(document).ready(function () {

    var currentPosition = 0;    
    var slides = $('.slide');
    var slideWidth = 650;
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;

    //Assign a timer, so it will run periodically
    slideShowInterval = setInterval(changePosition, speed);

    slides.wrapAll('<div id="slidesHolder"></div>');

    slides.css({ 'float': 'left' });

    //set #slidesHolder width equal to the total width of all the slides
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);

    $('#slideShowWindow')
    .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
    .append('<span class="slideNav" id="rightNav">Move Right</span>');

    manageNav(currentPosition);

    //tell the buttons what to do when clicked
    $('.slideNav').bind('click', function () {

        //determine new position
        currentPosition = ($(this).attr('id') === 'rightNav')
        ? currentPosition + 1 : currentPosition - 1;

        //hide/show controls
        manageNav(currentPosition);
        clearInterval(slideShowInterval);
        slideShowInterval = setInterval(changePosition, speed);
        moveSlide();
    });

    function manageNav(position) {
        //hide left arrow if position is first slide
        if (position === 0) {
            $('#leftNav').hide();
        }
        else {
            $('#leftNav').show();
        }
        //hide right arrow is slide position is last slide
        if (position === numberOfSlides - 1) {
            $('#rightNav').hide();
        }
        else {
            $('#rightNav').show();
        }
    }


    //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
    function changePosition() {
        if (currentPosition === numberOfSlides - 1) {
            currentPosition = 0;
            manageNav(currentPosition);
        } else {
            currentPosition++;
            manageNav(currentPosition);
        }
        moveSlide();
    }


    //moveSlide: this function moves the slide 
    function moveSlide() {
        $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
    }

});

感谢您的帮助，如果您有任何疑问或需要进一步的信息，请告诉我们：）

Answer 1

只需使用引导程序轮播即可轻松实现响应式幻灯片演示。您需要将以下内容添加到<head>标记中才能使用bootstrap：

<!-- Bootstrap stylesheets and links -->
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- End of required Bootstrap stylesheets and links -->

然后在你的旋转木马上使用这样的东西：

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

希望这有帮助！

我正在努力使我的幻灯片响应

1 个答案: