我尝试使用 bootstrap 制作幻灯片放映,这样您就可以在图像中滑动。但是图像没有显示。仅显示下一个和上一个按钮。我正在使用 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 »</a>';
html += '<a class="controls previous" href="' + (index) + '">« 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">×</span></button>
<div class="modal-content">
<div class="modal-body"></div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
}
</div>
</div>
谢谢
我必须编辑这个:
html += html;
但我不知道如何改变它。
这就是您看到的方式:
最佳答案
让这一切变得简单
如果您查看来自 http://getbootstrap.com/javascript/#carousel
复制第一个并添加一些 Razor
,这应该会为您生成一个 Carousel。
@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来触发点击事件:
$('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");
});
关于jquery - 带 Bootstrap 的幻灯片放映,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30192146/