JS 幻灯片以一种方式工作

Question

我的幻灯片出现了不稳定的行为。它由用户点击的寻呼机驱动。当点击相应的寻呼机时，下一个图像可见（不透明度/过滤器）并设置为 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”到任何前面的 list-slide1-5 淡入淡出行为正确
• IE：
• “list_slide1”到“list_slide3”即时跳转，不褪色
• “list_slide3”到“list_slide1”第二次暂停然后跳转

寻呼机和图像是从数据库动态生成的（因此是代码底部的一小段 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. ')}); ';
}
?>

Answer 1

请原谅我没有针对您的确切问题发布答案，但出于以下原因，我会避免自己编写 Javascript 插件：

• Web 上已经存在数百个，其中一些是在 GitHub 上作为开源开发的，通过协作开发来防止潜在问题。
• 无需重新发明轮子；只需花 20 分钟在谷歌上搜索 javascript 滑块，然后找到一个可以根据需要进行自定义的滑块。

我喜欢使用的一对是“caroufredsel”，它反应灵敏并提供了一些不错的功能（动态添加项目、回调等）。

另一个是'flexslider'。

Answer 2

解决方案：

问题是我试图淡化的 <div> 标签每个都包含一个 <img> 和另一个 <div>... 正在应用的 CSS 要么工作不一致/不稳定，要么 - 正如 IE 的习惯 - 不 -根本......解决方案是-而不是动画父<div>的淡入淡出-分别动画各个子组件。起初，IE 解决方案看起来完全独立。事实上，为所有浏览器创建一个简洁、轻量级的非 JQuery 幻灯片是很有见地的。一个权衡是我必须将所有样式合并到元素标签中，而不是单独的 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>