Question

我已将Slidesjs滑块嵌入我的网站。我试图了解如何使幻灯片可点击，因为即使我已将img元素包装在一个锚元素中，点击似乎也无法正常工作。

<div id="slides">
    <div class="slides_container">
        <div><a href="#"><img src="img/slider/slide1.png" alt="Slide #1"></a></div>
        <div><a href="#"><img src="img/slider/slide2.png" alt="Slide #2"></a></div>
        <div><a href="#"><img src="img/slider/slide3.png" alt="Slide #3"></a></div>
        <div><a href="#"><img src="img/slider/slide4.png" alt="Slide #4"></a></div>
    </div>
</div>

Answer 1

我遇到了同样的问题，这是slideLoaded函数中的“底部”参数。我改变了

    slidesLoaded: function() {
      $('.caption').animate({
        bottom:0
      },200);
    }

到

    slidesLoaded: function() {
      $('.caption').animate({
        bottom:-200
      },200);
    }

它有效。

所以，我有270px幻灯片的高度，我的最终剧本如下。

    animationStart: function(current){
      $('.caption').animate({
        bottom:-270
      },100);
    },
    animationComplete: function(current){
      $('.caption').animate({
        bottom:-230
      },200);
    },
    slidesLoaded: function() {
      $('.caption').animate({
        bottom:-230
      },20);
    }

Answer 2

这只是z-index问题，设置幻灯片div中的最高z-index并将位置设置为相对如下，你的链接现在就可以了。

<div id="slides" style="z-index:9999999; position:relative;">
<div class="slides_container">
    <div><a href="#"><img src="img/slider/slide1.png" alt="Slide #1"></a></div>
    <div><a href="#"><img src="img/slider/slide2.png" alt="Slide #2"></a></div>
    <div><a href="#"><img src="img/slider/slide3.png" alt="Slide #3"></a></div>
    <div><a href="#"><img src="img/slider/slide4.png" alt="Slide #4"></a></div>
</div></div>

Answer 3

在此示例中，每张幻灯片在点击时指向外部网页：http://slidesjs.com/examples/images-with-captions/

也许您可以尝试根据此示例调整代码。

Slidesjs不会使幻灯片可点击

3 个答案: