1

我正在尝试使用图像映射（“热点”）来更改 JQuery Swiper 实现的页面。请参阅http://www.homeducate.me/takeTheTour.htm的测试页面 它有一个带有热点的图像，我希望能够单击以直接切换页面，同时仍然允许在页面之间滑动导航！

我正在尝试使用 idangerous.swiper.hashnav.min.js 插件，该插件允许将 #page 报告到 URL 中，并直接导航到特定的 #page。我希望这也能让我从图像地图导航到特定页面。

从我的代码中提取：

<div class="swiper-container">
  <div class="swiper-wrapper">
  <br>
      <map name="FPMap0" id="FPMap0">
        <area href="#slide7" shape="polygon" coords="5, 2, 66, 3, 67, 27, 4, 26" />
        <area href="#slide1" shape="polygon" coords="186, 2, 235, 3, 236, 26, 186, 27" />
        <area href="#slide2" shape="polygon" coords="2, 129, 237, 128, 237, 159, 4, 159" />
        <area href="#slide3" shape="polygon" coords="4, 158, 237, 158, 237, 187, 1, 186" />
        <area href="#slide4" shape="polygon" coords="1, 187, 237, 186, 237, 220, 1, 221" />
        <area href="#slide5" shape="polygon" coords="1, 222, 237, 221, 237, 253, 2, 252" />
        <area href="#slide6" shape="polygon" coords="2, 252, 237, 251, 237, 281, 3, 281" />
      </map>
      <!--Slide 1-->
      <div class="swiper-slide" data-hash="slide1"> 
        <!-- Any HTML content of the 1st slide goes here -->
        <img src="http://www.homeducate.me/images/tour1.jpg" class="imgSizer"  usemap="#FPMap0" />
      </div>

等等

我仔细阅读了实施说明，但在 Chrome 开发工具中出现错误：'Uncaught SyntaxError: Unexpected token <' in idangerous.swiper.hashnav.min.js

谁能帮我找到问题？我正在绞尽脑汁，但无法发现它。有没有更好的方法来实现我想要做的事情？任何帮助都非常感谢。

干杯。

4

1 回答 1

1

找到了答案......

给图片贴图添加onclick，如下：

  <map name="FPMap0" id="FPMap0">
    <area onclick="mySwiper.swipeTo(6)" href="#slide7" shape="polygon" coords="5, 2, 66, 3, 67, 27, 4, 26" />

等等

然后在 mySwiper 脚本之前和下方添加以下脚本：

$('a[data-slide]').click(function(e){
  e.preventDefault();
  mySwiper.swipeTo(
  $(this).data('slide') );
  })

做梦。

感谢我在 Github.com https://github.com/nolimits4web/Swiper/issues/701上找到的类似示例/讨论

幻灯片从 0 开始编号。

希望这个答案在未来对其他人有所帮助。

干杯。

于 2014-06-12T16:14:32.033 回答