如何实现页面内的幻灯片页面

我试图实现像Google图片搜索这样的功能，当您单击图片时，子页面出现在图片下方的屏幕中。它需要一整行。截图如下所示。 http://www.wy19900814fun.com/thumbnails/test.png 如何实现页面内的幻灯片页面

这是我的代码。有没有人帮我实施或至少给我一些建议？我试图做一个功能，比如当你点击图片时，第二个div类显示在你点击的图片下方。它需要一整条线。

<html> 
 
<head> 
 
\t <style> 
 
\t \t .container { 
 
\t \t \t text-align: center; 
 
\t \t } 
 
\t \t 
 
\t \t .container img { 
 
\t \t \t display:inline-block; 
 
\t \t } 
 
\t \t .subpage { 
 
\t \t \t display:none; 
 
\t \t } 
 
\t </style> 
 
\t <script type="text/javascript"> 
 
\t 
 
\t </script> 
 
</head> 
 

 
<body> 
 
\t <div class="container"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572"> 
 
\t \t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571"> 
 
\t </div> 
 
\t 
 
\t <div class="subpage"> 
 
\t \t <p>This is </br>just</br> a test.</br> Please show</br> subpage</p> 
 
\t </div> 
 
</body> 
 
</html>

来源

2015-09-09 Yang Wang

我更新了我的答案。 –

$('img').click(function() { 
 
    var $img = $(this), 
 
     offset = $img.offset(), 
 
     subPage = $('#subPage').hide().insertAfter('.container'), 
 
     nextImage = $img.next(), 
 
     finalImage = $img; 
 
    
 
    if (!$img.is(':last-child')) { 
 
    while (offset.top == nextImage.offset().top) { 
 
     nextImage = nextImage.next(); 
 
    } 
 
    
 
    finalImage = nextImage.prev(); 
 
    } 
 
    
 
    subPage.html('').append($img.clone()).insertAfter(finalImage).slideDown(); 
 
});

.container { 
 
\t text-align: center; 
 
} 
 

 
.container img { 
 
\t display:inline-block; 
 
    width:32%; 
 
    vertical-align:top; 
 
} 
 

 
#subPage { 
 
    background:#222; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572"> 
 
\t <img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571"> 
 
</div> 
 

 
<div id="subPage"></div>

来源

2015-09-09 08:02:52

你真棒！这正是我想要的。我会学习你的代码。感谢Mosh！ –

欢迎您！ –

你可以做这样的：

JS：

$(document).ready(function() { 
    $('.container img').click(function() { 
     var src = $(this).attr('src'); 
     var subpage = $('.subpage'); 
     subpage.hide().empty().fadeIn(250); 
     $('<img>', {'src' : src}).hide(250).appendTo(subpage).fadeIn(250); 
    }); 
});

Jsfiddle

来源

2015-09-09 07:57:36 Zl3n

对不起，迟到的回应，但这不像图片中的功能。请看下面的答案。 –

如何实现页面内的幻灯片页面

回答

相关问题