javascript – 当我将它与Jquery.smoothState.js组合时,BXslider.js被破坏了.我该如何解决？

我使用 BXslider.js创建了一个带有全屏图像滑块的主页.滑块中的每个图像都有一个带有锚链接的标题文本.
点击锚链接后,您将移动到单个详细信息页面.如果您从主页移动到详细信息页面,则会出现转换.这与 jquery.smoothstate.js页面上的演示基本相同.

我遇到一个问题,包括jquery.smoothstate javascript后BXslider坏了.每当你按下BXslider中的上一个或下一个箭头按钮时,滑块本身就会覆盖自己并重复上一个/下一个按钮,图像将消失.在萤火虫中我没有得到任何警告或错误.这使得调试变得困难.希望有人可以帮我解决这个问题.

提前致谢！

下面你会找到我为我的bxslider.js / smootstate网站编写的代码.

主页代码

<div id="main" class="m-scene">
            <div class="scene-element scene-element--fadeinup">
            <section id="banner">
                <div class="inner">

                    <div id="Box">
                        <div class="relative-Box">
                            <div class="logo"></div>
                            <h2>Client-name</h2>
                            <div id="captions">
                                <p>&#34; This is a caption &#34;</p>
                            </div>
                        </div>
                        <a href="/generic.html" class="more">To genericpage</a>
                    </div>

                    <ul class="bxslider">
                      <li style="background-image: url('/images/pic1.jpg');"></li>
                      <li style="background-image: url('/images/pic2.jpg');"></li>
                      <li style="background-image: url('/images/pic3');"></li>
                      <li style="background-image: url('/images/pic4.jpg');"></li>
                      <li style="background-image: url('/images/pic5.jpg');"></li>
                    </ul>

                </div>

            </section>
        </div>
    </div>
   </div>

通用的html / css选择器

我正在为jquery.smootstate.js使用通用的html /选择器.以下html与家庭和家庭相同; detailpage.

<div id="main" class="m-scene">
        <div class="scene-element scene-element--fadeinup">

css3过渡

场景元素& scene-element – fadeinup选择器用于css3页面动画.

@keyframes fadeInUp{
    0%{opacity:0; transform:translate3d(0,100%,0);}
    100%{opacity:1;transform:none;}
}

.m-scene .scene-element{
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animtation-fill-mode: both;
}

.m-scene .scene-element--fadeinup {animation-name:fadeInUp;}

.m-scene.is-exiting .scene-element {animation-direction: alternate-reverse;}

jquery.smoothstate.js的javascript

(function($) {
          'use strict';
          var $body = $('html,body'),content = $('#smooth').smoothState({
                // Runs when a link has been activated
                onStart: {
                  duration: 250,// Duration of our animation
                  render: function (url,$container) {
                    // toggleAnimationClass() is a public method
                    // for restarting css animations with a class
                    content.toggleAnimationClass('is-exiting');
                    // Scroll user to the top
                    $body.animate({
                      scrollTop: 0
                    });
                  }
                }
              }).data('smoothState');
              //.data('smoothState') makes public methods available
        })(jQuery);

解决方法

从错误中吸取教训

1.不要在jquery.smoothstate中使用DIY命名空间

我使用#smooth代替#main作为容器< div>.我的jquery函数试图调用jquery.smoothstate,但这不起作用,因为#main用作jquery.smoothstate.js库中的标识符.

2.定义锚点而不是使每个链接都成为光滑状态的一部分

在我修正了上述错误后,另一个问题就出现了.我在我的源代码中使用了bxslider.每当我按下箭头旁边的箭头或在BXslider中的prev时,滑块的新副本将出现在原始滑块上方.

我通过定义一个选项锚来解决这个问题.这是jquery.smoothstate的一部分.这将排除所有其他锚点.

3.woggleAnimationClass已弃用

使用而不是toggleAnimationClass functioncall restartCSSAnimations();

使用addClass()添加临时类’is-exited’

这是完整的工作来源：

(function($) {

      'use strict';

          content = $('#main').smoothState({
            // Runs when a link has been activated
            prefetch: true,pageCacheSize: 4,anchors: 'link',onStart: {
              duration: 250,// Duration of our animation
              render: function (url,$container) {

                //add temporary class #main
                $('#main').addClass('is-exited');

                // for restarting css animations with a class
                content.restartCSSAnimations();

              }
            }
          }).data('smoothState');
    })(jQuery);