2

我正在尝试使用一些自定义功能设置 ResponsiveSlides.js。我需要能够将滑块与手动控件一起使用，这些控件在鼠标悬停而不是单击时工作，但在单击时转到特定的 url 链接。我将在幻灯片中有四张幻灯片，并且需要能够使用四个按钮导航它们。这是我想要实现的目标：

  1. 让我的四个按钮在鼠标悬停而不是单击时工作。我正在使用'manualControls：“.custom-pagers”，'来实现自定义导航。我想知道是否有办法在鼠标悬停时导航到我的特定幻灯片，但让它在点击时转到href=""URL。

  2. 有另一个单独的按钮 ( )，在鼠标悬停时暂停滑块，但在单击时.buy-tag a转到URL。href=""

这是我的代码：

$(function () {

  // Slideshow 1
  $("#slider1").responsiveSlides({
    speed: 800,
    manualControls: ".custom-pagers", 
  });
});

和 HTML：

    <!-- SUPER SLIDER -->
    <div class="rslides_container">

    <div id="main-featured" class="twelve columns">  

    <ul class="rslides" id="slider1">
      <li><div id="img-featured" class="five columns"><a href="http://www.domain.com/"><img src="http://www.domain.com/images/image1.png" alt=""></a></div>
         </li>

      <li><div id="img-featured" class="five columns"><a href="http://www.domain.com/"><img src="http://www.domain.com/images/image2.png" alt=""></a></div>
        </li>

      <li><div id="img-featured" class="five columns"><a href="http://www.domain.com/"><img src="http://www.domain.com/images/image3.png" alt=""></a></div>
        </li>

    </ul>


    </div>


    </div><!-- /SUPER SLIDER -->

    <div class="full-row green-mid">
        <div class="row">
            <div id="types-tag" class="four columns">
                <h3>What type are <strong>YOU</strong>?</h3>
            </div>
        </div>

        <div class="row">
            <div class="eight columns">
                <ul class="custom-pagers">
                <li><div class="straight-tag"><a href="http://www.domain.com/link1"><span>1</span> Straight</a></div></li><li><div class="curly-tag"><a href="http://www.domain.com/link2"><span>3</span> Curly-Kinky</a></div></li>
                <li><div class="wavy-tag"><a href="http://www.domain.com/link3"><span>2</span> Wavy-Curly</a></div></li><li><div class="kinky-tag"><a href="http://www.domain.com/link4"><span>4</span> Kinky-Coily</a></div></li>
                </ul>
            </div>
        </div>

        <div class="clear"></div>
    </div>

<div class="buy-tag"><a href="http://www.domain.com/buy"><span><strong>Buy</strong> Now</span></a></div>

任何人都可以帮助或指出我正确的方向吗？提前致谢！

4

0 回答 0