Question

我尝试使用引导程序制作幻灯片，以便您滑动图像。但图像没有显示。仅显示下一个和上一个按钮。我使用的是asp.net mvc5

这是jquery：

$(document).ready(function () {
            $myModal = $('#myModal');

            $('.row img.img-responsive').on('click', function () { // <-- notice the selector change
                var $this = $(this),
                    src = $this.attr('src'),
                    html = '<img src="' + src + '" class="img-responsive" />';

                //Start 
                var index = $(this).parent('.row img.img-responsive').index();
                var html = '';
                html += html;
                html += '<div style="height:25px;clear:both;display:block;">';
                html += '<a class="controls next" href="' + (index + 2) + '">next &raquo;</a>';
                html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>';
                html += '</div>';
                //End 


                updateModalBody($myModal, html);
                $myModal.modal();
            });

            $myModal.on('hidden.bs.modal', function () {

                updateModalBody($myModal, '');
            });

            function updateModalBody($modal, html) {
                $modal.find('.modal-body').html(html);
                $modal.modal('hide');
            }

        })

        $(document).on('click', 'a.controls', function () {
            //this is where we add our logic
            var index = $(this).attr('href');
            var src = $('ul.row li:nth-child(' + index + ') img').attr('src');

            $('.modal-body img').attr('src', src);

            var newPrevIndex = parseInt(index) - 1;
            var newNextIndex = parseInt(newPrevIndex) + 2;

            if ($(this).hasClass('previous')) {
                $(this).attr('href', newPrevIndex);
                $('a.next').attr('href', newNextIndex);
            } else {
                $(this).attr('href', newNextIndex);
                $('a.previous').attr('href', newPrevIndex);
            }

            var total = $('ul.row li').length + 1;
            //hide next button
            if (total === newNextIndex) {
                $('a.next').hide();
            } else {
                $('a.next').show()
            }
            //hide previous button
            if (newPrevIndex === 0) {
                $('a.previous').hide();
            } else {
                $('a.previous').show()
            }


            return false;
        });

这就是css / html：

<div id="tabs-2">
    <div class="row">
        @foreach (var item in Model.LolaBikePhotos)
        {

            @model  ContosoUniversity.Models.UserProfile
            @*<div class="col-lg-3 col-md-4 col-xs-6 thumb">*@
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">
                @*<a class="thumbnail">*@
                <img class="img-responsive" src="/Images/profile/@item.ImagePath" alt="" />
            </div>

            <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                <div class="modal-dialog">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="modal-content">
                        <div class="modal-body"></div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->

            </div>
    <!-- /.modal -->
        }
    </div>
</div>

谢谢

我必须编辑这个：

html += html;

但我不知道如何改变它。

您将看到它： enter image description here

Answer 1

使这个简单

如果你看一下HTML http://getbootstrap.com/javascript/#carousel

复制第一个并添加一些Razor，这应该为您生成一个轮播。

@model List<YOUR_MODEL_NAME>
    @{var j = 0;}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
     @for (var i = 0; i < Model.Count(); i++)
     {
       <li data-target="#carousel-example-generic" data-slide-to="@i"></li>
      }
  </ol>

<div class="carousel-inner" role="listbox">

 @foreach (var item in Model)
  {
   <div class="item @(j == 0 ? "active" : "")">
       <img src="@(string.Format("/Images/profile/{0}", item.ImagePath))" />
   </div>
  @(j = 1)
  }

</div>

<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">Previous</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">Next</span>
</a>
</div>

修改

以下是缩略图的示例，当点击缩略图时，它将打开一个带有轮播的模态对话框。

我已经为你的场景创建了一个JSFiddle： http://jsfiddle.net/u7hxy3zc/1/

您应该使用以下代码作为示例，并在View中使用，重命名所有模型和参数。

注意：以下代码尚未编译可能存在语法错误

// DISPLAY THUMBNAILS <div class="col-md-2"> @for(int i =0; i < Model.Count(); i++) { <img src="@Model[i].ImageUrl" data-id="@i" data-action="image" /> } </div> .......... REMOVE HTML TO MAKE EXAMPLE CLEAR ... MODAL DIALOG START................. <div class="modal-body"> ...........CAROUSEL START............ <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> @for(var i = 0 ; i< Model.Count(); i++) { <li data-target="#carousel-example-generic" data-slide-to="@i"></li> } </ol> <div class="carousel-inner" role="listbox"> @for(var i = 0; i < Model.Count(); i++) { <div class="item" data-image-id="@i"> // DISPLAY i for Testing @i <img src="@Model[i].ImageUrl" /> } </div> ........... REMOVED REST OF CAROUSEL......(NEXT / PREV BUTTONS)......... .............CAROUSEL END...................

然后在末尾添加此jQuery以触发click事件：

$('body').on('click', '*[data-action="image"]', function (e) { e.stopPropagation(); var img = $(this); var currentId = img.data('id'); $('#myModal').modal(); var currentSlide = "*[data-slide-to='" + currentId + "']"; var currentImagSlide = "*[data-image-id='" + currentId + "']"; console.log(currentSlide); $("*[data-slide-to]").removeClass("active"); $(".item").removeClass("active"); var item = $('.carousel-indicators').find(currentSlide); var imgItem = $('.carousel-inner').find(currentImagSlide); console.log(item); item.addClass("active"); imgItem.addClass("active"); });

Answer 2

＆＃13;

<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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

＆＃13;

绝对看看bootstrap carousel

幻灯片放映与引导程序

2 个答案: