0

我将为产品创建一个颜色选择器。我有 12 种颜色选项，因此要显示 12 张照片。

我希望它看起来像这个 Flash 页面：

http://www.renault.co.uk/cars/model/newmeganehatch/colourselector.aspx

不过，我更喜欢使用 jQuery。

我正在考虑使用 div 行来包含颜色，并在单击颜色时调用主图片容器 div 中的图像更改。

堆叠图像并使用 display:none 会更好，还是使用 jQuery 循环之类的插件会更好？

提前致谢。

编辑以显示迄今为止的代码：

<!--The color picker div-->
<div class="picker p1" data-bkgnd="images/1.jpg"></div>
<div class="picker p2" data-bkgnd="images/2.jpg"></div>
<div class="picker p3" data-bkgnd="images/3.jpg"></div>

<!--The container for the product image-->
<div class="productdisplay"></div>

    <script type="text/javascript">
     $(document).ready(function(){
       $(".picker").click(function(){

           //Load background string from data of clicked element
           var bVal = $(this).data('bkgnd');

           //Set display's background to retrieved background string
           $(".productdisplay").hide('fade').css({'background-image': "url('" + bVal + "')"}).show('fade');
       });
     });
    </script>

和 CSS

.productdisplay {
height:327px;
width:590px;
float:left;
background-image:url('images/1.jpg');
}
.picker {
height:50px;
width:50px;
float:left;
}
.p1 {
background:#FFF;
}
.p2 {
background:#C4C9C5;
}
.p3 {
background:#988879;
}

目前在将 bVal 数据加载到 div 时将“未定义”作为 URL，不知道为什么。

4

1 回答 1

3

这样的事情可以让你开始：

//The color picker div    
<div class="picker" data-bkgnd="/content/images/someimg.jpg"></div>

//The container for your product image
<div class="productDisplay"></div>

<script type="text/javascript">


 $(document).ready(function(){
   $(".picker").click(function(){       
       //Load background string from data of clicked element
       var bVal = $(this).attr('data-bkgnd');
       //Set display's background to retrieved background string
       $(".productDisplay").hide().css({'background-image': "url(" + bVal + ")"}).show();
   });
 });

</script>

点击这里查看小提琴

于 2012-11-21T14:02:18.517 回答