前往轮播图像

问题描述 投票：0回答：1

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

//Pause/play buttons

 $(document).ready(function(){
  //$("#mycarousel").carousel( { interval: 2000 } );
  $("#carousel-pause").click(function(){
    $("#mycarousel").carousel('pause');
  });

  $("#carousel-play").click(function(){
    $("#mycarousel").carousel('cycle');
  });
});
.carousel {background:#444;}
.carousel-item .img-fluid {width:100%; max-height: 70vh;}
.carousel-item a {display: block; width:100%;}
header p{color: #20317f; background: white; padding: 1em; border: thin #828280; border-radius: 40px;}
header h1, h2, h3{color: #20317f; background: white; padding: .1em 0em; border: thin #828280; border-radius: 40px;}
<div id="carousel-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
        <ol class="carousel-indicators">
            <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-2" data-slide-to="1"></li>
            <li data-target="#carousel-2" data-slide-to="2"></li>
            <li data-target="#carousel-2" data-slide-to="3"></li>
            <li data-target="#carousel-2" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
         <div class="carousel-item active">
          <img src="pics/tags.png" alt="responsive image" class="d-block img-fluid">
           <div class="carousel-caption justify-content-center align-items-center">
            <div>
             <h2 style="color: #20317f">Plastic Valve Tags</h2>
              <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
            </div>
           </div>
          </div>
          <div class="carousel-item">
           <img src="pics/logic.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Panel Labels</h2><br>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
             </div>
            </div>
          </div>
          <div class="carousel-item">
           <img src="pics/skate.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Control Panel Facing</h2>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
           </div>
           <div class="carousel-item">
            <img src="pics/warn.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>Plastic Warning Labels</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
             <div class="carousel-item">
            <img src="pics/more.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>And More</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
           </div>
           <a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
           </a>
           <a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
           </a>
          </div>

我的轮播标题都位于图像之上，我希望它们位于图像下方，但仍在轮播内，以便它们作为一个整体移动。 轮播可以工作，所以它是一个样式问题而不是损坏的代码:) 我对 JavaScript 很陌生，所以它可能就像 JavaScript 将标题放置在原来的位置一样简单，但我不知道如何重新定位它们：/

这是我的轮播 HTML，它工作完美，我唯一的问题是标题位置。

<div id="carousel-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
        <ol class="carousel-indicators">
            <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-2" data-slide-to="1"></li>
            <li data-target="#carousel-2" data-slide-to="2"></li>
            <li data-target="#carousel-2" data-slide-to="3"></li>
            <li data-target="#carousel-2" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
         <div class="carousel-item active">
          <img src="pics/tags.png" alt="responsive image" class="d-block img-fluid">
           <div class="carousel-caption justify-content-center align-items-center">
            <div>
             <h2 style="color: #20317f">Plastic Valve Tags</h2>
              <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
            </div>
           </div>
          </div>
          <div class="carousel-item">
           <img src="pics/logic.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Panel Labels</h2><br>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
             </div>
            </div>
          </div>
          <div class="carousel-item">
           <img src="pics/skate.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Control Panel Facing</h2>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
           </div>
           <div class="carousel-item">
            <img src="pics/warn.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>Plastic Warning Labels</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
             <div class="carousel-item">
            <img src="pics/more.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>And More</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
           </div>
           <a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
           </a>
           <a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
           </a>
          </div>

这是CSS

.carousel {background:#444;}
.carousel-item .img-fluid {width:100%; max-height: 70vh;}
.carousel-item a {display: block; width:100%;}
header p{color: #20317f; background: white; padding: 1em; border: thin #828280; border-radius: 40px;}
header h1, h2, h3{color: #20317f; background: white; padding: .1em 0em; border: thin #828280; border-radius: 40px;}

注意：我必须在标题中添加白色背景，以便它们在当前位置清晰可见，但这显然意味着整个网站上的所有标题都有一个白色框：/ 这是 JavaScript 

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

//Pause/play buttons

 $(document).ready(function(){
  //$("#mycarousel").carousel( { interval: 2000 } );
  $("#carousel-pause").click(function(){
    $("#mycarousel").carousel('pause');
  });
   
  $("#carousel-play").click(function(){
    $("#mycarousel").carousel('cycle');
  });
});
javascript html css carousel html-heading
1个回答
0
投票

正确的答案是在代码中使用“carousel-caption”类自动定位标题。将其更改为“汽车标题”解决了这个问题。这些按钮也被错误地使用，并已更新，这里是针对具有相同问题的任何人的更正代码:)

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

//Pause/play buttons

 $(document).ready(function(){
  //$("#mycarousel").carousel( { interval: 2000 } );
  $("#carousel-pause").click(function(){
    $("#mycarousel").carousel('pause');
  });
   
  $("#carousel-play").click(function(){
    $("#mycarousel").carousel('cycle');
  });
});
.carousel {background:#444;}
.carousel-item .img-fluid {width:100%; max-height: 70vh;}
.carousel-item a {display: block; width:100%;}
header p{color: #20317f; background: white; padding: 1em; border: thin #828280; border-radius: 40px;}
header h1, h2, h3{color: #20317f;}
<div id="carousel-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
        <ol class="carousel-indicators">
            <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-2" data-slide-to="1"></li>
            <li data-target="#carousel-2" data-slide-to="2"></li>
            <li data-target="#carousel-2" data-slide-to="3"></li>
            <li data-target="#carousel-2" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
         <div class="carousel-item active">
          <img src="pics/tags.png" alt="responsive image" class="d-block img-fluid">
           <div class="car-caption justify-content-center align-items-center">
            <div>
             <h2 style="color: #20317f" align="center"><a href="contact.html">Plastic Valve Tags</a></h2><br>
            </div>
           </div>
          </div>
          <div class="carousel-item">
           <img src="pics/logic.png" alt="responsive image" class="d-block img-fluid">
            <div class="car-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f" align="center"><a href="contact.html">Plastic Panel Labels</a></h2><br>
             </div>
            </div>
          </div>
          <div class="carousel-item">
           <img src="pics/skate.png" alt="responsive image" class="d-block img-fluid">
            <div class="car-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f" align="center"><a href="contact.html">Plastic Control Panel Facing</a></h2><br>
              </div>
             </div>
           </div>
           <div class="carousel-item">
            <img src="pics/warn.png" alt="responsive image" class="d-block img-fluid">
             <div class="car-caption justify-content-center align-items-center">
              <div>
               <h2 align="center"><a href="contact.html">Plastic Warning Labels</a></h2><br>
              </div>
             </div>
            </div>
             <div class="carousel-item">
            <img src="pics/more.png" alt="responsive image" class="d-block img-fluid">
             <div class="car-caption justify-content-center align-items-center">
              <div>
               <h2 align="center"><a href="contact.html">And More</a></h2><br>
              </div>
             </div>
            </div>
           </div>
           <a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
            <span class="car-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
           </a>
           <a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
            <span class="car-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
           </a>
          </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.