Question

我正在使用jQuery传输尝试在我的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部分

好的，所以我看到谷歌地图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

这是你要的吗？

  $(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代码添加到上面的答案中。我发现它没有任何不同的行为。我在控制台上进行了快速检查，发现了一些错误和警告，都与您的谷歌API代码有关。

域名：为什么有'domain.com'？

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

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

SensorNotRequired： https://developers.google.com/maps/documentation/javascript/error-messages util.js中：3

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

Answer 2

这是一个有效的PEN：http://codepen.io/anon/pen/jWOdwK

总的来说，你的代码似乎是正确的，但我注意到了一些事情：

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

最佳！

jQuery cycle2和JQuery Transit没有在第一张幻灯片上工作

2 个答案: