大小图幻灯效果实现方式是什么

这种类型的幻灯效果代码如何调用，效果是点击下面的图片上面div的图片自动切换

<div class="second-show box2" id="program" style="background: #000000;">
      <div class="show" style="background-image: url(&quot;/static/upload/image/20170614/1497420328.jpg&quot;);">
       <div class="arrow"></div>
       <div class="masks">
        <div class="num">01</div>
        <div class="theTitle">财务部</div>
       </div>
       <div class="prev-btn btn-left control"></div>
       <div class="next-btn btn-right control"></div>
      </div>
      <div class="tab1">
       <ul class="program" style="display: block;">
          <li data-src="/static/upload/image/20170614/1497420174.jpg">
       <div class="pic" style="background: url(/static/upload/image/20170614/28.jpg) center center;"><img src="images/Team-zlBG.png"></div>
       <div class="title-img">财务部</div><div class="bgs"></div><div class="number">010</div>
       </li>
       <li data-src="/static/upload/image/20170614/1497420174.jpg">
       <div class="pic" style="background: url(/static/upload/image/20170614/1497420174.jpg) center center;"><img src="images/Team-zlBG.png"></div>
       <div class="title-img">运营部</div><div class="bgs"></div><div class="number">010</div>
       </li>
       </ul>
      </div>
     </div>