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

时间:2018-01-25 18:11:30

标签: javascript html css twitter-bootstrap

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

2 个答案:

答案 0 :(得分:1)

创建旋转木马和模态

下面的脚本更改img in model with arrow mprev(previous)& 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类替换选择器

答案 1 :(得分:0)

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

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