网站中这种幻灯效果如何用标签实现，静态代码已经有了

上面是原图，下面是一个缩略图，这个实现起来不知道怎么实现，不知道大家有没有遇到相同的问题！

<div class="page01">
        <ul class="bannerUl">
[loop=1]
            <li class="no1 bannerli">
                <div class="inner1">
                    <img src="{@photourl}"  />
                    <a style="top:260px; left:308px;"  href="{@linkurl}" target="_blank">{@title}</a>
                </div>
            </li>
[/loop]
[loop=1]
            <li class="no2 bannerli">
          <div class="inner1">
                    <img src="{$GetInstallDir}image/banner1.jpg"/>
                    <a  href="http://pwt.zoosnet.net/LR/Chatpre.aspx?id=PWT58247316" target="_blank">了解迅达教育</a>
              </div>
            </li>[/loop]
[loop=1]
              <li class="no3 bannerli">
          <div class="inner1">
                    <img src="{$GetInstallDir}image/banner2.jpg"/>
                    <a  href="http://pwt.zoosnet.net/LR/Chatpre.aspx?id=PWT58247316" target="_blank">了解迅达教育</a>
                </div>
            </li>[/loop][loop=1]
             <li class="no4 bannerli">
          <div class="inner1">
                    <img src="{$GetInstallDir}image/banner4.jpg"/>
                    <a  href="http://pwt.zoosnet.net/LR/Chatpre.aspx?id=PWT58247316" target="_blank">了解迅达教育</a>
               </div>
            </li>[/loop]
        
        </ul>
        <div class="innerC">
            <div class="circle">
                <ul>[loop=1]
                    <li class="cur">
                        <img src="{@photourl}" />
                    </li>[/loop]
                    [loop=3]<li>
                        <img src="images/4.jpg"  />
                    </li>
                     [loop=1]
                  

                </ul>
            </div>
        </div>
</div>

不知道后面的这个小缩略图该如何实现和上面的大图同步，点击小图就可以切换大图，大图和小图同步播放！