1

時間間隔（たとえば5秒後）で画像を変更する方法を尋ねたいと思いました。これらの同じ画像は、リンクされたホバーに応じて変更されます（www.gamespot.comなどのサイトと同様）。私はこれらのリンクを持っています：

<ul class="ul1">
<li class="li1"><a class="link1" title="CRM" href="http://link1" target="_self">CRM</   a><li>                                                                     
<li class="li1"><a class="link1" title="Apskaita ir finansai" href="http://link2" target="_self">Apskaita ir finansai</a></li>
<li class="li1"><a class="link1" title="Darbo užmokestis" href="http://link3" target="_self">Darbo užmokestis</a></li>
<li class="li1"><a class="link1" title="Kasos terminalas" href="http://link4" target="_self">Kasos terminalas</a></li>
</ul>

さて、これまでにこれを作成することができました：jqueryは次のようになります：

function swapImages(){
var $active = $('#gallery1 .active');
var $next = ($('#gallery1 .active').next().length > 0) ? $('#gallery1 .active').next() : $('#gallery1 img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
  // Run our swapImages() function every 5secs
  setInterval('swapImages()', 5000);
}

.jsファイルを「wp-includes/js/jquery」に追加しました。私はheader.phpを開き、「head」タグの中に追加しました：

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>
<script type="text/javascript" src="/wp-includes/js/jquery/image-on-time.js"></script> /*my .js function*/

CSSスタイル：

#gallery1{
float:right;
width:400px; 
height:300px; 
}
#gallery1 img{
    display:none;
    position:absolute;

}
#gallery1 img.active{
    display:block;
}

私のページのhtml構文：

<div id="gallery1">
 <article>
<img src="img1.jpg" class="active"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
 </article>

したがって、それを実行した後、最初の画像が表示され、他には何も起こりません。.jsファイルの読み込みに問題がありましたか、それとも他の問題がありましたか？

だから私は読んだ、そのjqueryは'$'を使用して他のスクリプトと競合する可能性があります。だから私はこのように機能を変更しました：

var $j = jQuery.noConflict();
$j(function swapImages(){
var $j(active) = $j('#gallery1 .active');
var $j(next) = ($j('#gallery1 .active').next().length > 0) ? $('#gallery1 .active').next  () : $j('#gallery1 img:first');
$j(active).fadeOut(function(){
$j(active).removeClass('active');
$j(next).fadeIn().addClass('active');
  });
}
  $j(document).ready(function(){
  // Run our swapImages() function every 5secs
  setInterval('swapImages()', 5000);
   });

また、.jsの呼び出し方法も変更しました。

 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wp-includes/js/jquery/image-on-time.js"></script>

しかし、何も変わっていません..誰かが私が間違っていることを教えてもらえますか？..それで、ワードプレスについて少し知っている人は誰もいませんか？

4

1 に答える 1

0

$ 記号の代わりに「jQuery」という単語を使用し、jQuery.noConflict(); を呼び出します。

于 2012-08-13T14:13:22.893 に答える