jQuery cycle2 和 JQuery Transit 在第一张幻灯片上不起作用

Question

我正在使用 jQuery transit 尝试在我的 jQuery Cycle2 幻灯片中向我的幻灯片添加一些 css3 动作。我已经设法让所有但第一张幻灯片产生效果。请参阅下面的代码。

就像我说的，第一张幻灯片没有应用效果。我已经到了需要伸出援手的地步！帮助！

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>   

<div id="home-slideshow" class="cycle-slideshow slide-animate"
        data-cycle-timeout="6000"
        data-cycle-speed="1000"
        data-cycle-slides="> div.home-slide-cont"
        data-cycle-fx="fade"
        data-cycle-pause-on-hover="true">

        <div class="home-slide-cont first-slide">
               <div class="full-slide" style="background-image: url('1_large.jpg')"></div>
               <span class="slide-title">
                <blockquote>Title One here</blockquote>
               </span><!-- end .full-width -->
        </div>

        <div class="home-slide-cont ">
            <div class="full-slide" style="background-image: url('2_large.jpg')"></div>
            <span class="slide-title">
                <blockquote>Title Two here</blockquote>
            </span><!-- end .full-width -->
        </div>

        <div class="home-slide-cont ">
            <div class="full-slide" style="background-image: url('3_large.jpg')"></div>
            <span class="slide-title">
                <blockquote>Title Three here</blockquote>
            </span><!-- end .full-width -->
        </div>                  

</div>



 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
         $(document).ready(function() {
             $('#home-slideshow.slide-animate .first-slide div').transition({scale: 1.1}, 9000,'ease'); 

             $('#home-slideshow.slide-animate').on('cycle-after',function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag){
                $('#home-slideshow.slide-animate .cycle-slide-active div').transition({scale: 1.1}, 9000,'ease'); 
             });
        });
    </script> 

    <script type="text/javascript" src="/js/jquery.transit.min.js"></script>
    <script type="text/javascript" src="/js/jquery.cycle2.swipe.min.js"></script>
    <script type="text/javascript" src="/js/jquery.cycle2.min.js"></script> 

感谢您对此的任何帮助，非常感谢。

第 2 部分

好的，所以我已经看到 Google Maps API 导致了冲突，如果我删除它可以工作的 api。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=weather,panoramio,places,geometry,drawing&language="></script> <script type="text/javascript"> var EE_GMAPS = { version : "3.2.2", base_path : "http://www.domain.com/", act_path : "http://www.domain.com/?ACT=85", api_path : "http://www.domain.com/?ACT=86", } </script> <script type="text/javascript" src="http://www.domain.com/themes/third_party/gmaps/js/gmaps.min.js" ></script> 


<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle2.min.js"></script> 
<script type="text/javascript" src="/js/jquery.cycle2.swipe.min.js"></script>

<script type="text/javascript">

     $(document).ready(function() {
        $('#home-slideshow.slide-animate .first-slide div').transition({
          scale: 1.1
        }, 9000, 'ease');
        $('#home-slideshow.slide-animate').on('cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
          $('#home-slideshow.slide-animate .cycle-slide-active div').css({
            scale: 1
          });
        });
        $('#home-slideshow.slide-animate').on('cycle-after', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
          $('#home-slideshow.slide-animate .cycle-slide-active div').transition({
            scale: 1.1
          }, 9000, 'ease');
        });
      });


                </script> 

Answer 1

这是一个工作笔：http://codepen.io/anon/pen/jWOdwK

总体而言，您的代码似乎是正确的，但我注意到几件事：

• 您正在使用带有background 属性的div 作为幻灯片容器。这是一种不好的做法，因为您会丢失语义，并且如果未指定容器的大小，则根本不会显示图像。请改用<img class="full-slide" src="yourimagepath.ext">
• 您已经包含了两次 JQuery；包含一个就足够了，保留一个在底部；
• 由于您使用 div 作为幻灯片容器（正如我在第一点上所说），请确保您的 full-slide 类已指定 width 和 height。

最好的！

Answer 2

这是你要求的吗？

  $(document).ready(function() {
    $('#home-slideshow.slide-animate .first-slide div').transition({
      scale: 1.1
    }, 9000, 'ease');
    $('#home-slideshow.slide-animate').on('cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
      $('#home-slideshow.slide-animate .cycle-slide-active div').css({
        scale: 1
      });
    });
    $('#home-slideshow.slide-animate').on('cycle-after', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
      $('#home-slideshow.slide-animate .cycle-slide-active div').transition({
        scale: 1.1
      }, 9000, 'ease');
    });
  });

.full-slide {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=weather,panoramio,places,geometry,drawing&language="></script> <script type="text/javascript"> var EE_GMAPS = { version : "3.2.2", base_path : "http://www.domain.com/", act_path : "http://www.domain.com/?ACT=85", api_path : "http://www.domain.com/?ACT=86", } </script> <script type="text/javascript" src="http://www.domain.com/themes/third_party/gmaps/js/gmaps.min.js" ></script>    <script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.swipe.js"></script>

<div id="home-slideshow" class="cycle-slideshow slide-animate" data-cycle-timeout="6000" data-cycle-speed="1000" data-cycle-slides="> div.home-slide-cont" data-cycle-fx="fade" data-cycle-pause-on-hover="true">

  <div class="home-slide-cont first-slide">
    <div class="full-slide" style="background-image: url('http://malsup.github.io/images/p1.jpg')"></div>
    <span class="slide-title">
                <blockquote>Title One here</blockquote>
               </span>
    <!-- end .full-width -->
  </div>

  <div class="home-slide-cont ">
    <div class="full-slide" style="background-image: url('http://malsup.github.io/images/p2.jpg')"></div>
    <span class="slide-title">
                <blockquote>Title Two here</blockquote>
            </span>
    <!-- end .full-width -->
  </div>

  <div class="home-slide-cont ">
    <div class="full-slide" style="background-image: url('http://malsup.github.io/images/p3.jpg')"></div>
    <span class="slide-title">
                <blockquote>Title Three here</blockquote>
            </span>
    <!-- end .full-width -->
  </div>

</div>

更新

我已将您的 google api 代码添加到上述答案中。我发现它没有任何不同的行为。我在控制台进行了快速检查，发现了一些错误和警告，所有这些都与您的 google api 代码有关。

• 域：为什么会有“domain.com”？

加载资源失败：服务器响应状态为 404 （未找到） http://www.domain.com/themes/third_party/gmaps/js/gmaps.min.js

• 传感器：google api 说它不需要传感器参数。

不需要传感器： https://developers.google.com/maps/documentation/javascript/error-messages util.js:3

除非您提供确切的错误代码，否则我不能再说什么。