如何将锚点放在css滑块上？

Question

我正在创建一个带滑块上方链接的css滑块，一旦您点击其中一个链接，它就会将滑块移动到所选图像。

这是我的完整代码。我使用区域形状来映射图像上链接的位置，因为如果我按照链接单独进行，那么图像将无法正确对齐，

        <a href=""><img src="wysiwyg/classic.png" alt="" /></a>
        <a href=""><img src="wysiwyg/trendy.png" alt="" /></a>  
        <a href=""><img src="wysiwyg/modern.png" alt="" /></a>
        <a href=""><img src="wysiwyg/period.png" alt="" /></a>


        <div id="slidy-container">
        <figure id="slidy">
        <img src="../Desktop/slide1.png" alt="slide1" width="940" height="549" />
        <img src="../Desktop/slide1.png" alt="slide1" width="940" height="549" />
        <img src="../Desktop/slide1.png" alt="slide1" width="940" height="549" />
        <img src="../Desktop/slide1.png" alt="slide1" width="940" height="549" />           
        </figure>
        </div>
    </body>
    <script>
        var timeOnSlide = 3,
        timeBetweenSlides = 2,
        animationstring = 'animation',
        animation = false,
        keyframeprefix = '',
        domPrefixes = 'Webkit Moz O Khtml'.split(' '),
        pfx = '',
        slidy = document.getElementById("slidy");
        if (slidy.style.animationName !== undefined) { animation = true; }
        if ( animation === false ) {
        for ( var i = 0; i < domPrefixes.length; i++ ) {
        if ( slidy.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
        pfx = domPrefixes[ i ];
        animationstring = pfx + 'Animation';
        keyframeprefix = '-' + pfx.toLowerCase() + '-';
        animation = true;
        break;
        } } }
        if ( animation === false ) {
        // animate using a JavaScript fallback, if you wish
        } else {
        var images = slidy.getElementsByTagName("img"),
        firstImg = images[0],
        imgWrap = firstImg.cloneNode(false);
        slidy.appendChild(imgWrap);
        var imgCount = images.length,
        totalTime = (timeOnSlide + timeBetweenSlides) * (imgCount - 1),
        slideRatio = (timeOnSlide / totalTime)*100,
        moveRatio = (timeBetweenSlides / totalTime)*100,
        basePercentage = 100/imgCount,
        position = 0,
        css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML += "#slidy { text-align: left; margin: 0; font-size: 0; position: relative; width: " + (imgCount * 100) + "%; }";
        css.innerHTML += "#slidy img { float: left; width: " + basePercentage + "%; }";
        css.innerHTML += "@"+keyframeprefix+"keyframes slidy {";
        for (i=0;i<(imgCount-1); i++) {
        position+= slideRatio;
        css.innerHTML += position+"% { left: -"+(i * 100)+"%; }";
        position += moveRatio;
        css.innerHTML += position+"% { left: -"+((i+1) * 100)+"%; }";
        }
        css.innerHTML += "}";
        css.innerHTML += "#slidy { left: 0%; "+keyframeprefix+"transform: translate3d(0,0,0); "+keyframeprefix+"animation: "+totalTime+"s slidy infinite; }";
        document.body.appendChild(css);
        }
  </script>