Question

我一直在尝试制作一张图片轮播，每张照片上都有一个可点击的图片库。图像进入旋转木马，如果我点击一个，它会打开一个图像库，它们是自己的（不同的）。尝试过模态，但无法让它们正常工作。许多不同的旋转木马，幻灯片，但无法找到该做什么

Answer 1

创建旋转木马和模态

下面的脚本更改img in model with arrow mprev（previous）＆amp; mnext（下）

$(document).ready(function(){
 $('.modal ').hide();


 $('.carousel > img').click(function(){
  var im=$(this).attr('src');
 $('.modal').css('display','block');
 $('.modal > img').attr('src',im);

   });
 $('.mprev').click(function(){
    var i= $('.modal > img').attr('src');
    var p= $('img[src='+i+']');
    var im=p.parent().previous().child('img');
    im=im.attr('src');
    $('.modal > img').attr('src',im);
 });
 $('.mnext').click(function(){
    var i= $('.modal > img').attr('src');
    var p= $('img[src='+i+']');
    var im=p.parent().next().child('img');
    im=im.attr('src');
    $('.modal > img').attr('src',im);
 });
});

注意：我不熟悉bootstrap所以使用上面提到的新类或用bootstrap类替换选择器

Answer 2

你可以看看我最近制作的东西here。它不是旋转木马，但会显示一个两层的画廊，您可以在其中看到项目列表，然后在每个项目中进一步详细说明。

基本上有一个元素列表构成第一个轮播的内容，然后嵌套在其中的是许多其他图像和段落元素。当你点击其中一个初始项目时，它会展开，会显示滚动按钮，并使用jquery滚动图像和文本段落以添加“可见”字样。他们的类，以及从视图中添加/删除它们的CSS动画

图像轮播，每个图像都有自己的可点击图库

2 个答案: