jQuery的图像切换

Question

问题

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

所以基本上我在上#maindiv的CSS有一个主要的全屏幕的背景图像和我各列表项的小缩略图，他们被点击时，他们被切换到以#maindiv创建一个新的大背景图像。

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的.thumb一个class的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')+")"); 
}); 

DEMO

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

Here是一个工作示例。

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

UPDATE：

我分配了类候选图像为背景。这将防止单击时将任何其他图像设置为背景。 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> 

现在你可以使用点击（）函数来更改背景图片

<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>