Question

我在侧边栏中有一个包含18个链接列表的页面，点击链接主要部分图像时必须更改。默认情况下，第一个图像可见。我知道可以做到。请帮我。谢谢 kristtee

Answer 1

这足以让你朝着正确的方向前进。这个特殊的例子使用了jQuery，这只是实现类似内容的众多方法之一。

<!DOCTYPE html>
    <html>
        <head>
            <style>
                .main img {
                    width: 500px;
                    height: 500px;
                }

                .thumbs img {
                    width: 50px;
                    height: 50px;
                    cursor: pointer;
                }
            </style>
        </head>
        <body>
            <div class="main">
                <img src="https://static.pexels.com/photos/20787/pexels-photo.jpg" alt="cat">
            </div>

            <div class="thumbs">
                <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="cat">
                <img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-24.jpg" alt="cat">
                <img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-7.jpg" alt="cat">
            </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                    $('.thumbs img').on('click', function(){
                        var src = $(this).attr('src');
                        $('.main img').attr('src', src);
                    })
                })
            </script>
        </body>
    </html>

简单的Javascript图像交换

1 个答案: