对象文字模式jQuery Slider

Question

在学习如何构建我的代码的同时（我给出了编写更好的代码的小步骤）我用缩略图和主图像开发这个简单的滑块。我使用（据我所知）一个对象文字模式来开发滑块对象。

它的作用基本上是当你点击缩略图时，你得到src并更改主图像src。虽然它正在工作，但我的问题是：有没有更好的方法来做到这一点（肯定有）并优化代码？任何建议都会有所帮助。

这是我的HTML

    <section class="product-slider">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <img class="main-pic" src="images/single-product.png">
                    </div>
                    <div class="thumnails-container">
                        <ul>
                            <li class="thumb"><img src="images/single-product.png"></li>
                            <li class="selected thumb"><img src="images/single-product1.png"></li>
                            <li class="thumb"><img src="images/single-product2.png"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

这是我的jQuery

thumbSlider.init();

var thumbSlider = {

  init: function(){
    this.cacheDom();
    this.bindEvents();
  },
  cacheDom: function() {
    this.$slider = $('.product-slider');
    this.$thumb = this.$slider.find('.thumb');
    this.$mainPic = this.$slider.find('.main-pic');
  },
  bindEvents: function(){
    this.$thumb.click(this.getSrc.bind(this));
  },
  getSrc: function(event){
    console.log(event.target);
    var src = $(event.target).attr('src');
    this.$mainPic.attr('src', src);
  }
};

PS：对于此滑块，缩略图和主图像将与使用某些CSS缩放的图像相同。

感谢。