imagecube js cube旋转错误

问题描述：

我有一个imagecube jquery插件的小问题。 http://keith-wood.name/imageCube.html imagecube js cube旋转错误

我已经得到它在三个UNLINKED图像的主页上工作得很好。当我把链接放在他们周围时，向上的旋转变得诡异。任何人有任何想法？提前致谢。链接如下：

http://www.bigideaadv.com/a-z/

tbh，一个简单的淡入淡出或幻灯片动画会看起来更好，更平滑。 – grc 2012-02-08 19:56:54

我同意，但这不是客户想要的。 – 2012-02-08 20:49:18

答

你可以用CSS cursor: pointer;而不是包装的安克尔标签使用onclick属性与window.location.href=">insert url here<"为每个图像：

HTML：

<div id="image_carousel2"> 
    <img src="/a-z/./images/slide1_alt.jpg" width="960" height="353" onclick="window.location.href='/a-z/generic';" /> 
    <img src="/a-z/./images/slide2_alt.jpg" width="960" height="353" onclick="window.location.href='/a-z/about-a-and-z';" /> 
    <img src="/a-z/./images/slide3_alt.jpg" width="960" height="353" onclick="window.location.href='/a-z/operations';" /> 
</div>

CSS：

#image_carousel2 img { 
    cursor: pointer; 
}

另请参阅this example。

不一定是我一直在寻找的答案，但您的解决方案完美无缺。谢谢。 – 2012-02-08 20:50:35

答

Scessor的解决方案可能是您不想去的方式，您也可以在每次轮换时动态地将图像打包并解包到<a>标签中。 imageCube的beforeRotate和afterRotate处理程序使这成为可能。

HTML：

<div id="image_carousel2" style="width: 960px; height:353px; left:-10px; position:relative; margin:0 auto; background:transparent !important;"> 
    <img src="/a-z/./images/slide1_alt.jpg" width="960" height="353" url="http://www.bigideaadv.com/a-z/generic" /> 
    <img src="/a-z/./images/slide2_alt.jpg" width="960" height="353" url="http://www.bigideaadv.com/a-z/about-a-and-z" /> 
    <img src="/a-z/./images/slide3_alt.jpg" width="960" height="353" url="http://www.bigideaadv.com/a-z/operations" /> 
</div>

的javascript：

$(document).ready(function() { 
    $('#image_carousel2').imagecube({ 
     direction: 'up', 
     expansion: 25, 
     segments: 15, 
     reduction: 30, 
     speed: 1000, 
     pause: 7000, 
     shading: false, 
     //Before rotate, remove wrapping anchor (if it exists) from current img. 
     beforeRotate: function startRotate(current, next) { 
      if(current.parentNode.tagName.toLowerCase() == 'a') {//Safety 
       $(current).unwrap();//Remove the wrapping anchor. 
      } 
     }, 
     //After rotate, wrap next img in its anchor 
     afterRotate: function endRotate(current, next) { 
      var $next = $(next); 
      $next.wrap($next.data('anchor'));//Wrap the next img in its anchor. 
     } 
    }); 
    //Now create an <a> node for each img in the cube, 
    //and save as a .data() property of its <img> node. 
    //This allows reuse of <a> nodes, avoiding the need to 
    //(re)create them dynamically at each rotation. 
    $('#image_carousel2 img').each(function(i){ 
     var $this = $(this); 
     var $a = $('<a>').attr('href', $this.attr('url')); 
     $this.data('anchor', $a); 
     if(i==0){ $this.wrap($a); }//Wrap the first node in its anchor. 
    }); 
});

正如你所期望的那样，HTML被简化，但JS是更加复杂。

请注意，此解决方案使用自定义<img ... url="...">属性，因此该页面可能无法在大多数验证器中验证。

imagecube js cube旋转错误

相关推荐