在html代码中设置来自轮播的“活动”

时间：2018-05-18 09:14:46

标签： c# html css asp.net carousel

我有一个项目，其中包含一些带有“carousel”的视图。例如，这是带有一些按钮的页面之一。 p1

当我点击时，例如，在第一个按钮“Ver mais”上显示此p2

到目前为止一切顺利！但是如果我离开这个“窗口”并点击另一个按钮“ver mais”，就会发生这种情况，也就是说，幻灯片没有在第一张图片上开始。p3

我的HTML代码是这样的（我只发布了两个图库的代码，因为我有一些，它会变得太广泛）：

window.onload = function() {

  $(document).ready(function() {
    $('#data').after('<div id="nav"></div>');
    var rowsShown = 5;
    var rowsTotal = $('#data tbody tr').length;
    var numPages = rowsTotal / rowsShown;
    for (i = 0; i < numPages; i++) {
      var pageNum = i + 1;
      $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
    }
    $('#data tbody tr').hide();
    $('#data tbody tr').slice(0, rowsShown).show();
    $('#nav a:first').addClass('active');
    $('#nav a').bind('click', function() {

      $('#nav a').removeClass('active');
      $(this).addClass('active');
      var currPage = $(this).attr('rel');
      var startItem = currPage * rowsShown;
      var endItem = startItem + rowsShown;
      $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
      css('display', 'table-row').animate({
        opacity: 1
      }, 300);
    });
  });

}
body {
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  width: 960px;
  margin: 40px auto;
}

h2 {
  font-size: 21px;
  color: #008000;
  font-weight: normal;
}

#ancora {
  text-align: right;
  color: black;
  position: absolute;
  top: 205px;
  right: 200px;
  text-decoration: underline;
}

#customers {
  border-collapse: collapse;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

#customers th {
  background-color: black;
  color: white;
}

th,
td {
  padding: 5px;
  text-align: center;
}

.center {
  text-align: center;
}

.btn-info {
  color: #fff;
  background-color: rgba(0, 128, 0, 1);
  border-color: rgba(0, 0, 0, .075);
  cursor: pointer !important;
}

.btn {
  text-align: left;
}

.btn-info:hover {
  color: #fff;
  background-color: #10A125;
  border-color: #10A125;
}

.btn-info:active:hover {
  color: #fff;
  background-color: #10A125;
  border-color: #10A125;
}

.btn-info:focus {
  color: #fff;
  background-color: #10A125;
  border-color: #10A125;
}

.container {
  width: auto;
  height: auto;
}

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}

* {
  -webkit-box-sizing: content-box;
}

.imagem {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

#data tr {
  display: none;
}

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
}

#data td,
#data th {
  border: 1px solid #ddd;
}

#data tr:nth-child(even) {
  background-color: #f2f2f2;
}

#data tr:hover {
  background-color: #ddd;
}

#data th {
  background-color: black;
  color: white;
}

td {
  width: 350px;
  text-align: center;
}

a:-webkit-any-link {
  color: white;
  cursor: pointer;
  text-decoration: underline;
}

#nav {
  margin: 0 auto;
  float: none;
  display: table;
}

#nav a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
}

#nav a.active {
  background-color: #008000;
  color: white;
  border: 1px solid #008000;
}

#nav a:hover:not(.active) {
  background-color: #ddd;
}

#nav a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#nav a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.carousel-control.right {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}

.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


  <h2>Projetos de Jardim & Lazer</h2>

  <a id="ancora" href="/Home/Index">Página Inicial</a>

  <table id="data" style="width:100%">
    <tbody>
      <tr>
        <th></th>
        <th><strong>Tipo de relva</strong></th>
        <th><strong>Descrição</strong></th>
        <th><strong>Localidade</strong></th>
      </tr>
      <tr style="display: table-row;">
        <td><img class="imagem" src="~/Imagens/Boticas1.jpg"></td>
        <td><strong>DOMO® SCALA (PHILI)</strong></td>
        <td>Boticas Hotel Art & Spa</td>
        <td>Boticas - Vila Real</td>
        <td>
          <div class="container">
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Ver mais</button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
              <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Boticas Hotel Art & Spa</h4>
                  </div>
                  <div class="modal-body">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                        <div class="item active">
                          <img src="~/Imagens/Boticas2.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
                          <div class="carousel-caption">
                          </div>
                        </div>
                        <div class="item">
                          <img src="~/Imagens/Boticas3.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
                          <div class="carousel-caption">
                          </div>
                        </div>
                        <div class="item">
                          <img src="~/Imagens/Boticas4.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
                          <div class="carousel-caption">
                          </div>
                        </div>
                        <div class="item">
                          <img src="~/Imagens/Boticas5.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
                          <div class="carousel-caption">
                          </div>
                        </div>
                        DOMO® SCALA (PHILI)
                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Anterior</span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Próxima</span>
                      </a>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr style="display: table-row;">
        <td><img class="imagem" src="~/Imagens/Seia1.jpg"></td>
        <td><strong>DOMO® MONZA</strong></td>
        <td>Centro Escolar</td>
        <td>Seia - Guarda</td>
        <td>
          <div class="container">
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Ver mais</button>

            <!-- Modal -->
            <div class="modal fade" id="myModal1" role="dialog">
              <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Centro Escolar de Seia</h4>
                  </div>
                  <div class="modal-body">
                    <div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic1" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic1" data-slide-to="2"></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                        <div class="item active">
                          <img src="~/Imagens/Seia2.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
                          <div class="carousel-caption">
                          </div>
                        </div>
                        <div class="item">
                          <img src="~/Imagens/Seia3.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
                          <div class="carousel-caption">
                          </div>
                        </div>
                        <div class="item">
                          <img src="~/Imagens/Seia4.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
                          <div class="carousel-caption">
                          </div>
                        </div>
                        DOMO® MONZA
                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Anterior</span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Próxima</span>
                      </a>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

有什么建议吗？另一个问题是，我在哪里更改从图像到另一个图像的转换时间？

0 个答案:

没有答案
相关问题
最新问题