Question

问题

我迷失了无数的js代码提示等等，我发现很难知道从哪里开始。救命啊！

所以基本上我在#main div的CSS中有一个主要的全屏幕背景图像，我有列表项目，每个都有小缩略图，当点击它们时，它们被切换为创建一个新的大#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属性设法解决了这个问题，同时为每个img class .thumb jQuery进行了交互。

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/

感谢所有人提供的意见和建议。收率

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

Here是一个有效的例子。

我已经使用了jquery，所以不要忘记在代码中包含jquery。

<强>更新

我已经为背景的候选图像分配了一个类。这样可以防止在单击时将任何其他图像设置为背景。 find the updated example here

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>

jQuery图像切换器

2 个答案: