Question

我创建了一个jquery幻灯片，我希望从左侧滑入2张图片1，从右侧滑入其他1张幻灯片。最后，图片可以从左侧滑入但不能向左滑动。我的代码有什么不对吗？有什么建议??

<script type="text/javascript">
   $(document).ready(function() {
  $('.slideshow').cycle({ 
    fx: 'custom', 
    cssBefore: {  
        top:  0, 
        left: 0, 
        width: 0, 
        height: 0,  
        zIndex: 1  
    }, 
    animIn:  {  
        right: 0,
        width: 200, 
        height: 200  
    }, 
    animOut: {  
        top:  200, 
        left: 200, 
        width: 0, 
        height: 0 
    }, 
    cssAfter: {  
        zIndex: 0  
    }, 
    delay: -1000 
});
    $('.slideshow2').cycle({ 
    fx: 'custom', 
    cssBefore: {  
        top:  0, 
        left: 0, 
        width: 0, 
        height: 0,  
        zIndex: 0  
    }, 
    animIn:  {  
        width: 200, 
        height: 200  
    }, 
    animOut: {  
        top:  200, 
        right: 200, 
        width: 0, 
        height: 0 
    }, 
    cssAfter: {  
        zIndex: 0  
    }, 
    delay: -1000 
});
});
</script>

Answer 1

您正在寻找this the effect吗？

$(document).ready(function() { 
  $('.slideshow').cycle({ fx: 'custom', cssBefore: {top:0,left:0,width:0,height:0,zIndex: 1},  
    animIn:  {right:0,width:240,height:160},  
    animOut: {top:0,left:0,width:0,height:0},  
    cssAfter: {zIndex:0},  
    delay: -1000 }); 
  $('.slideshow2').cycle({ fx: 'custom', cssBefore: {top:0,left:240,width:0,height:0,zIndex:0},  
    animIn:  {left:0,width:240,height:160},  
    animOut: {top:0,left:240,width:0,height:0},  
    cssAfter: {zIndex:0},  
    delay: -1000 }); 
});

我更改了代码，以便.slideshow2元素以其实际宽度的100％左侧开始，240px在这种情况下。 animIn将左侧更改为0，animOut将其更改回240。这会导致图像从包含框的右侧开始增长。

Jquery幻灯片问题。有谁可以帮忙

1 个答案: