javascript - jQuery 图像切换器

Question

问题

我迷失了阅读无数的 js 代码提示等，我发现很难知道从哪里开始。帮助！

所以基本上我在 CSS 中有一个主要的全屏背景图像，#main div并且我有每个带有小缩略图的列表项，当它们被单击时，它们会切换以在#main div.

HTML

<div id="main">
    <ul id="thumbs">
        <li>
            <a href="#">
                <img src="http://www.lorempixel.com/50/50" />
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://www.lorempixel.com/50/50" />
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://www.lorempixel.com/50/50" />
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://www.lorempixel.com/50/50" />
            </a>
        </li>
    </ul>
</div>

CSS

#main {
    background-image: url(http://www.lorempixel.com/500/50);
    width: 500px;
    height: 200px;
}
li {
    list-style: none;
    float: left;
    padding: 10px;
}

小提琴

http://jsfiddle.net/NjX4n/

谢谢您的帮助。

---

更新的解决方案

我最终使用该data属性解决了这个问题，并为 jQuery 提供了每个imgaclass进行.thumb交互。

HTML

<div id="main">
    <ul id="thumbs">
        <li>
            <a href="#">
                <img class="thumb" src="http://www.lorempixel.com/50/50"
                 data-header-img="http://www.lorempixel.com/500/200" />
            </a>
        </li>
        <li>
            <a href="#">
                <img class="thumb" src="http://www.lorempixel.com/50/50"
                 data-header-img="http://www.lorempixel.com/500/200" />
            </a>
        </li>
        <li>
            <a href="#">
                <img class="thumb" src="http://www.lorempixel.com/50/50"
                 data-header-img="http://www.lorempixel.com/500/200" />
            </a>
        </li>
        <li>
            <a href="#">
                <img class="thumb" src="http://www.lorempixel.com/50/50"
                 data-header-img="http://www.lorempixel.com/500/200" />
            </a>
        </li>
    </ul>
</div>

JS

$('.thumb').click(function() {
    $('#main').css('background-image', "url("+$(this).attr('data-header-img')+")");
});

演示

http://jsfiddle.net/NjX4n/1/

感谢大家的意见和建议。Y。

Answer 1

像这样的函数可以解决问题：

$('.bgType').click(function (event) {  //class of candidate image  
    var BgUrl = $(this).attr('src'); //identify which image was clicked and get its source
    $('#main').css('background-image', 'url(' + BgUrl + ')'); //set the extracted url as the BG
});

这是一个工作示例。

我为此使用了 jquery，所以不要忘记在你的代码中包含 jquery。

更新：

我已经为背景的候选图像分配了一个类。这将防止单击时将任何其他图像设置为背景。 在此处找到更新的示例

HTML：

<li><a href="#"><img class="bgType" src="img1/goes/here.png" /></a>

Answer 2

包括每个标签的 id

<div id="main">
<ul id="thumbs">
<li><a href="#" id="img1"><img src="img1/goes/here.png" /></a></li>
<li><a href="#" id="img2"><img src="img2/goes/here.png" /></a></li>
<li><a href="#" id="img3"><img src="img3/goes/here.png" /></a></li>
<li><a href="#" id="img4"><img src="img4/goes/here.png" /></a></li>
</ul>
</div>

现在您可以使用 click() 函数来更改背景图像

    <script>
        $(document).ready(function() {
            $('#img1').click(function() {
    //change background image
           $('#main').css('background-image', 'url(img1/goes/here.png)');


            });

//do this for next two links also
        });
    </script>