2

私のスライドショーは不安定な動作に苦しんでいます。これは、ユーザーがクリックするポケットベルによって駆動されます。対応するポケットベルをクリックすると、次の画像が表示され（不透明度/フィルター）、現在の画像の下に配置されるようにz-index 5（z-index 10）として設定されます。次に、現在の画像がフェードアウトされ、最後に次の画像が現在の画像に設定され、フェードアウトされた画像がz-index 0に設定されます。ただし、これは前の画像に戻った場合にのみ機能します（Chromeでは、はさらに奇妙な振る舞いをしています。）画像の順序で。つまり、

  • クロム：
  • 「list_slide1」から「list_slide3」へのフェードなしのインスタントジャンプ
  • 「list_slide3」から「list_slide1」へのフェードは正しく動作します
  • それから...
  • 「list_slide1」から「list_slide3」へのインスタントジャンプ「フェードなし」への「list_slide3」への
  • 「list_slide2」フェードは正しく動作します
  • また...
  • 「list_slide1」から「list_slide6」へのインスタントジャンプフェードなし
  • 前のリストへの「list_slide6」-slide1-5フェードは正しく動作します
  • IE：
  • 「list_slide1」から「list_slide3」へのフェードなしのインスタントジャンプ
  • 「list_slide3」から「list_slide1」への2回目の一時停止、ジャンプ

ポケットベルと画像はデータベースから動的に生成されます（したがって、コードの下部にあるPHPの小さな部分）。データベース内のページにリストされている数のアイテムが含まれています。

いくつかの注意：

1）フェード機能は、 http：//javascript.info/tutorial/animationに対する私自身の見解であり、サイトの他の場所にある別のスライドショーで問題なく機能しました。

2）getElementsByClassはhttp://www.robertnyman.comからのものであり、要求されたクラスの親要素と子要素を配列で返します（したがって、current [0]などを呼び出す理由）

ありがとう。

<script type="text/javascript">


var pager = document.getElementById('pager1');
var list_pagers = document.getElementById('pagers')
var i = 0;

var next_slide = function(next) {  
  if (next.className !== 'slide_current') {

    if (getElementsByClassName('slide_pending').length === 0) {
      var current = getElementsByClassName('slide_current');
      next.className = 'slide_pending';
      next.style.zIndex = 5;
      next.style.opacity = 1;
      next.style.filter = 'alpha(opacity = 100)';
      next.style.display = 'block';
      fade(current[0], linear, 1000);
      var fadeSlide = switcher(next, current);   
    }
  }  
}

var switcher = function(now, then) {

  setTimeout(function() {
  now.className = 'slide_current';
  now.style.zIndex = 10;
  now.style.opacity = 1;
  now.style.filter = 'alpha(opacity = 100)';

  then[0].className = 'slide_hide';
  then[0].style.zIndex = 0;

  then[0].style.opacity = 0;
  then[0].style.filter = 'alpha(opacity = 0)';
  then[0].style.display = 'none';
  }, 1001);
}

<?php
// dynamically build event for each pager/slide in the show.
for ($k = 1; $k <= $i; $k++) {
  echo  'var next_slide' .$k. ' = document.getElementById("list_slide" +' .$k. '); ',
        'addEvent(list_pagers.childNodes[' .($k - 1). '], "click", function () {next_slide(next_slide' .$k. ')}); ';
}
?>
4

2 に答える 2

1

あなたの正確な問題に対する答えを投稿しなかったことを許してください、しかし私は以下の理由であなた自身でJavascriptプラグインを書くことを避けます：

  • それらの数百はすでにWeb上に存在し、そのうちのいくつかはオープンソースとしてGitHubで開発されており、共同開発を通じて潜在的な問題を防ぎます。
  • 車輪の再発明をする必要はありません。20分かけてjavascriptスライダーをグーグルで検索し、ニーズに合わせてカスタマイズできるスライダーを見つけてください。

私が使用するのが好きなカップルは「caroufredsel」です。これは応答性が高く、いくつかの優れた機能（動的にアイテムを追加する、コールバックなど）を提供します。

もう1つは「flexslider」です。

于 2013-03-11T12:28:10.850 に答える
0

解決：

問題は、<div>私がフェードしようとしていたタグにそれぞれが含まれていることでし<img>た<div>...適用されているCSSが一貫性のない/不規則に機能していたか、IEのようにまったく機能していませんでした...解決策は-むしろ親のフェードをアニメートするよりも<div>、それぞれの子コンポーネントを個別にアニメートします。最初は、IEソリューションは完全にそれ自体であるように見えました。実際、すべてのブラウザー用に、すっきりとした軽量の非JQueryスライドショーを作成することは洞察に満ちていました。トレードオフの1つは、個別のCSSではなく、すべてのスタイルを要素タグに組み込む必要があることでした。これは、行われるDOM要求の性質のおかげで、この場合の唯一の実行可能なオプションのように見えました...質問/フィードバックはありがたいことに受け取られました：

 <script type="text/javascript">
var list_pagers = document.getElementById('pagers')
var i = 0;

<?php
// dynamically build event for each pager/slide in the show.
for ($k = 1; $k <= $i; $k++) {
  echo  'var next_slide' .$k. ' = document.getElementById("list_slide" +' .$k. '); ',
        'addEvent(list_pagers.childNodes[' .($k - 1). '], "click", function () {next_slide(next_slide' .$k. ')}); ';
}
?>

var next_slide = function(next) {  
  if (next.className !== 'slide_current') {
      if (navigator.appName === 'Microsoft Internet Explorer') {
        //IE 7 & 8 
        if ((navigator.appVersion.search('MSIE 8.0') >= 1) || (navigator.appVersion.search('MSIE 7.0') >= 1)) {

          var current = getElementsByClassName('slide_current')[0].childNodes[0];
          var currentBar = getElementsByClassName('slide_current')[0].childNodes[1];
          var nextBar = next.childNodes[1]; 
          var nextSlide = next.childNodes[0];
        } else {
        //IE 9
          var current = getElementsByClassName('slide_current')[0].childNodes[1];
          var currentBar = getElementsByClassName('slide_current')[0].childNodes[2];
          var nextBar = next.childNodes[2]; 
          var nextSlide = next.childNodes[1];
        }

        // give the next slide and its header (nextBar) a temporary status of zIndex 5/6
        nextSlide.style.zIndex = 5;
        nextBar.style.zIndex = 6;
        nextSlide.style.filter = "alpha(opacity=100)";
        nextBar.style.filter = "alpha(opacity=85)";

        fade(currentBar, linear, 500); // fade currentBar out
        fade(current, linear, 500); // fade current out

        //once we've faded out current slides, it's time to replace them with th
        setTimeout(function() {
          getElementsByClassName('slide_current')[0].className = 'slide_hide';
          next.className = 'slide_current';
          nextSlide.style.opacity = 1; // IE 9 includes opacity...
          nextBar.style.opacity = 1; // IE 9 includes opacity...
          nextSlide.style.filter = "alpha(opacity=100)";  
          nextBar.style.filter = "alpha(opacity=85)";
          nextSlide.style.zIndex = 10;
          nextBar.style.zIndex = 11;
        }, 500);         

    } else {
      // NON IE TAGS    
      var current = getElementsByClassName('slide_current')[0];
      current.childNodes[1].style.zIndex = 10; // [1] the child <img> tag
      current.childNodes[2].style.zIndex = 11; // [2] the child <div> tag
      current.childNodes[1].style.opacity = 1;
      current.childNodes[2].style.opacity = 0.85;    
      next.childNodes[1].style.zIndex = 5;
      next.childNodes[2].style.zIndex = 6;
      next.childNodes[1].style.opacity = 1;
      next.childNodes[2].style.opacity = 0.85;      
      fade(current.childNodes[1], linear, 600); // fade current out
      fade(current.childNodes[2], linear, 600); // fade current out
      var fadeSlide = setTimeout(function() {switcher(next, current)}, 500); 
      var switcher = function(now, then, nowBar, thenBar) {

        then.className = 'slide_hide';
        then.childNodes[1].style.opacity = 0;
        then.childNodes[2].style.opacity = 0;
        now.className = 'slide_current';  
        now.childNodes[1].style.opacity = 1;
        now.childNodes[2].style.opacity = 0.85;
        now.style.opacity = 1;
      }
    }
  }  
}


</script>
于 2013-03-12T21:27:30.463 に答える