个人中心
gpt4 book ai didi

html - Ebay 模板 - 图像缩略图

转载 作者：行者123 更新时间：2023-11-28 10:57:08 25 4
gpt4 key购买 nike

我正在为 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>

最佳答案

这是我想出的一个简单示例，它应该为您指明正确的方向:

http://jsfiddle.net/cjC32/

HTML

<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);
});

关于html - Ebay 模板 - 图像缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22575564/

25 4 0
文章推荐： javascript - 如何将字符串变量作为参数传递给 JavaScript 函数？
文章推荐： java - 如何在 Android 中添加嵌套对象作为 JavascriptInterface？
文章推荐： javascript - 使用 Javascript 刷新 div 的问题
文章推荐： javascript 下拉停止在 Wordpress Woocommerce https 页面上工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com