SOURCE

var style=[
  "red",
  "blue",
  "cyan",
  "purple"
];//样式库
$(".thumbnail-wrap").click(function(){
  console.log("点击事件生效");
    //点击聚焦
    $(this).css("background-color","red").siblings().css("background-color","white");
    // 获取被点击缩略图的索引
    var index=$(this).index();
    console.log("当前索引为："+index);
   $(".img-content").css("background-color",""+style[index]]);
})

<div class="img-wrap">
        <div class="img-content">
        </div>
        <ul class="thumbnails">
            <li class="thumbnail-wrap">
              <div class="thumbnail-content" style="background-color:red"></div>
          </li>
            <li class="thumbnail-wrap">
              <div class="thumbnail-content" style="background-color:blue"></div>
          </li>
            <li class="thumbnail-wrap">
              <div class="thumbnail-content" style="background-color:cyan"></div>
          </li>
            <li class="thumbnail-wrap">
              <div class="thumbnail-content" style="background-color:purple"></div>
          </li>
        </ul>
    </div>

.img-content{
  width:400px;
  height:200px;
  background-color:red;
}
.thumbnails{
    padding: 8px 0;
    position: absolute;
    bottom: 10 px;
    overflow: hidden;
    background-color: rgba(223, 223, 223, 0.6);
    border-radius: 5px;
}
.thumbnail-wrap{
    width: 104px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    float: left;
    margin: 0 12px;
    background-color: #ffffff;
}
.thumbnail-content{
    width: 100px;
    height: 60px;
    border-radius: 5px;
    background-size: cover;
}