2

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

OK、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>
4

2 に答える 2

0

これはあなたが求めたものですか？

  $(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 によると、センサー パラメーターは必要ありません。

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

正確な欠陥のあるコードを提供しない限り、これ以上何も言えません。

于 2015-12-06T10:10:25.700 に答える
0

動作中の PEN は次のとおりです: http://codepen.io/anon/pen/jWOdwK

全体として、あなたのコードは正しいように見えますが、私はいくつかのことに気付きました:

  • をスライド コンテナーとしてプロパティdivと共に使用しています。backgroundセマンティックが失われ、コンテナのサイズが指定されていないと画像がまったく表示されないため、これは悪い習慣です。代わり<img class="full-slide" src="yourimagepath.ext">に
  • JQuery を 2 回含めました。インクルージョンは 1 つあれば十分です。
  • div(最初のポイントで述べたように) スライド コンテナーとして使用しているため、full-slideクラスにwidth指定heightされていることを確認してください。

一番！

于 2015-12-06T10:19:47.833 に答える