当前位置：文江博客话题详情

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

发布于 2024-10-13 06:30:59 字数 178 浏览 4 评论 0原文

Jquery 插件 easySlider 1.7 - 如何创建easySlider 中的交叉淡入淡出效果？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡忘如思 2024-10-20 06:30:59

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

回复收藏 0 原文

夜空下最亮的亮点 2024-10-20 06:30:59

用此插件代码替换 easyslider 代码。

http://bogojoker.com/easySlide/

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

然后按照网站上的示例创建您想要的淡入淡出。真的很容易。

回复收藏 0 原文

佼人 2024-10-20 06:30:59

查找这一行

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'}
                    );  
            }

我希望这对您有帮助

look for this line

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

and change it for

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

                }

then look for this line

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

and change it for

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

I hope this help you

回复收藏 0 原文

北凤男飞 2024-10-20 06:30:59

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

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

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

If you are using easySlider1.7 then you can modify this easily.

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

Then the slider will fade when vertical option is set to false. Or you can add your own option, just add two if sentences on those lines. Then you can switch between all options (vertical, horizontal, crossfade) on the fly.

回复收藏 0 原文

~没有更多了~