1

問題

数え切れないほどの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/

助けてくれてありがとう。

更新されたソリューション

私は最終的に、jQueryが対話するための各aをdata与えるとともに、属性を使用してそれを解決することができました。imgclass.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。

4

2 に答える 2

2

このような関数はトリックを行うことができます:

$('.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>
于 2013-03-20T17:41:15.487 に答える
0

各タグの 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>
于 2013-03-20T17:34:55.397 に答える