Question

我正在为eBay制作一个简单的模板

我想得到这样的效果，就像这里：

enter image description here

我希望当你点击缩略图时会跳过大型照片。举个例子我的代码：

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <title>Przykład</title>
        <style>
            *, *:after, *:before {margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box}
            .visuallyhidden {position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}
            body {width: 100%; height: 100%}
            header[role="banner"] {width: 100%; height: 100px; background-color: green}
            header[role="banner"] h1, main[role="main"], .lewo h3, .lewo article h4, footer[role="contentinfo"] {color: white; text-align: center}
            main[role="main"] {width: 998px; margin: 30px auto 0 auto}
            .lewo {float: left}
            .lewo article {background-color: green; width: 400px; height: 200px}
            .lewo article:not(:first-of-type) {margin-top: 30px}
            .lewo article:last-of-type {width: 400px; height: 100px}
            .srodek {width: 568px; height: 30px; margin-left: 30px; background-color: green; float: right}
            .srodek2 {width: 568px; height: 100px; margin-left: 30px; margin-top: 20px; background-color: green; float: right}
            footer[role="contentinfo"] {margin-top: 30px; background-color: green; width: 100%; height: 100px; float: left; clear: both}
        </style>
    </head>
    <body>
        <header role="banner">
            <h1>Nagłówek strony</h1>
        </header>
        <main role="main">
            <h2 class="visuallyhidden">Nagłówek main</h2>
            <section class="lewo">
                <h3 class="visuallyhidden">Nagłówek sekcji</h3>
                <article>
                    <h4>Nagłówek artykułu</h4>
                </article>
                <article>
                    <h4>Nagłówek artykułu</h4>
                </article>
                <article>
                    <h4>Nagłówek artykułu</h4>
                </article>
            </section>
            <article class="srodek">
                <h3>Środek</h3>
        </main>
        <footer role="contentinfo">
            Stopka
        </footer>
    </body>
</html>

Answer 1

这是我提出的一个简单示例，它应该指向正确的方向：

http://jsfiddle.net/cjC32/

<强> HMTL

<div class="gallery-wrapper">
    <div class="main-img">
        <img src="http://cache.desktopnexus.com/thumbnails/1671826-bigthumbnail.jpg" alt="" />
    </div>
    <ul class="thumbnails">
        <li class="thumb">
            <img src="http://cache.desktopnexus.com/thumbnails/1671826-bigthumbnail.jpg" alt="" />
        </li>
        <li class="thumb">
            <img src="http://cache.desktopnexus.com/thumbnails/1689654-bigthumbnail.jpg" alt="" />
        </li>
    </ul>
</div>

<强> CSS

ul {
    margin:0 padding:0;
    list-style-type:none;
}
.gallery-wrapper {
}
.main-img {
    width:300px;
}
.main-img img, .thumb img {
    width:100%;
}
.thumbnails {
}
.thumb {
    display:inline-block;
    width:100px;
    height:100px;
    margin-left:10px;
}
.thumb:first-child {
    margin-left:0;
}

<强> JS

$('.thumb').each(function () {
    var imgSRC = $('img', this).attr('src');
});

$('.thumb').on('click', function () {
    var imgSRC = $('img', this).attr('src');
    $('.main-img img').attr('src', imgSRC);
});

Answer 2

我们可以通过*onclick event*

完成此操作

 onclick="document.getElementById('bigpic').src='<main:thumbimageurl />

你能指导我你是如何得到这些缩略图的吗？我被困在那。

易趣模板 - 图像的缩略图

2 个答案: