jquery - Jquery Plugin easySlider 1.7 - 如何在easySlider中创建交叉淡入淡出效果？

Question

Jquery Plugin easySlider 1.7 - 如何在easySlider中创建交叉淡入淡出效果？

谢谢

Answer 1

该插件仅用于滑动过渡，因此进行交叉淡入淡出需要修改插件（不建议）或寻找新插件。我最近讨论了一种方法，您可以在这个线程中通过手动编码的 jQuery 实现交叉淡入淡出。希望对你有帮助。

Answer 2

寻找这条线

if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { marginLeft: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );              
                } 

并将其更改为

if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { opacity: 0 }, 
                        { queue:false, duration:'slow', complete:adjust }
                    );  

                }

然后寻找这条线

if(!options.vertical) {
                $("ul",obj).css("margin-left",(t*w*-1));
            }

并将其更改为

if(!options.vertical) {
                $("ul",obj).css("margin-left",(t*w*-1));
                $("ul",obj).animate(
                        { opacity: 1 }, 
                        { queue:false, duration:'slow'}
                    );  
            }

我希望这对你有帮助

Answer 3

如果您使用的是easySlider1.7，那么您可以轻松修改它。

Replace `marginTop: p` with ` opacity: 1` and `opacity: 0` at lines 133 and 169.

然后，当垂直选项设置为 false 时，滑块将消失。或者您可以添加自己的选项，只需在这些行中添加两个 if 语句。然后，您可以即时在所有选项（垂直、水平、交叉淡入淡出）之间切换。

Answer 4

用这个插件代码替换easyslider代码。

http://bogojoker.com/easySlide/

（从“修改后的 js 文件”下方底部的“链接到 js 文件”链接中获取代码）。

然后按照网站上的示例创建所需的渐变。真的很容易。