Javascript FlexSlider 2带缩略图滑块-主图像的上一个下一个'；行不通_Javascript_Html_Css_Carousel_Flexslider

Javascript FlexSlider 2带缩略图滑块-主图像的上一个下一个'；行不通

javascript html css

Javascript FlexSlider 2带缩略图滑块-主图像的上一个下一个'；行不通,javascript,html,css,carousel,flexslider,Javascript,Html,Css,Carousel,Flexslider,我正在使用FlexSlider 2和缩略图滑块。然而，问题是，主映像没有响应。如果我按下下一个/上一个按钮，它将不会滑动/淡入下一个/上一个图像。即使我点击其中一个缩略图，它也不会改变。但是缩略图滑块的上一个/下一个按钮工作正常。我就是找不到问题。我没有触摸flexslider.js，而是触摸flexslider.css。我改变了一些东西来消除阴影等等。但是我也使用了未接触过的flexslider.css，它也不起作用。代码如下： <!DOCTYPE html> <html c

我正在使用FlexSlider 2和缩略图滑块。然而，问题是，主映像没有响应。如果我按下下一个/上一个按钮，它将不会滑动/淡入下一个/上一个图像。即使我点击其中一个缩略图，它也不会改变。但是缩略图滑块的上一个/下一个按钮工作正常。我就是找不到问题。我没有触摸flexslider.js，而是触摸flexslider.css。我改变了一些东西来消除阴影等等。但是我也使用了未接触过的flexslider.css，它也不起作用。代码如下：

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="css/flexslider.css" type="text/css">
  <link rel="stylesheet" href="css/default.css" type="text/css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.flexslider.js"></script>
  <script type="text/javascript">
    $(window).load(function() {
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        directionNav: false,
        slideshow: false,
        touch: true,
        itemWidth: 160,
        itemMargin: 3,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        start: function(slider) {
          $('html').removeClass('no-js');
          slider.removeClass('loading');
        },
        animation: "fade",
        slideshow: false,
        directionNav: false,
        controlNav: true,
        touch: true,
        useCSS: false,
        slideshowSpeed: 3000,
        animationSpeed: 300,
        sync: "#carousel"

      });
    });
  </script>
  <script>
    function launchFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
      $('.slide_text').css('bottom', '5%');
      $('.slide_text').css('zoom', '1.5');
      $('.flex-fullscreen-launch').css('visibility', 'hidden');
      $('.flex-fullscreen-cancel').css('visibility', 'visible');
      $('.flex-fullscreen-cancel').css('top', '20%');
      $('.flex-play-button').css('top', '20%');
      $('.flex-pause-button').css('top', '20%');
      $('.flex-next-button').css('bottom', '30%');
      $('.flex-prev-button').css('bottom', '30%');
      $('.flex-control-thumbs').css('position', 'static');
    }

    function cancelFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      $('.slide_text').css('bottom', '2%');
      $('.slide_text').css('zoom', '1');
      $('.flex-fullscreen-launch').css('visibility', 'visible');
      $('.flex-fullscreen-cancel').css('visibility', 'hidden');
      $('.flex-fullscreen-launch').css('top', '6%');
      $('.flex-play-button').css('top', '6%');
      $('.flex-pause-button').css('top', '6%');
      $('.flex-next-button').css('bottom', '54%');
      $('.flex-prev-button').css('bottom', '54%');
      $('.flex-control-thumbs').css('position', 'absolute');
    }
  </script>
</head>

<body>
  <div id="container">
    <div id="div_left">
      <input class="button active" type="button" value="Button 1" />
      <input class="button" type="button" value="Button 2" />
      <input class="button" type="button" value="Button 3" />
      <div id="slider" class="flexslider">
        <ul class="slides">
          <li>
            <img alt="asdf" src="img/1.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/2.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/3.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/4.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/5.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/6.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/7.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/8.jpg" />
          </li>
        </ul>
        <a class="flex-fullscreen-launch" href="#" onclick="launchFullScreen(document.getElementById('slider'))"></a>
        <a class="flex-fullscreen-cancel" href="#" onclick="cancelFullScreen(document.getElementById('slider'))"></a>
        <a class="flex-play-button" href="#" onclick="$('#carousel').flexslider('play'); $('.flex-play-button').css('visibility', 'hidden'); $('.flex-pause-button').css('visibility', 'visible');"></a>
        <a class="flex-pause-button" href="#" onclick="$('#carousel').flexslider('pause'); $('.flex-pause-button').css('visibility', 'hidden'); $('.flex-play-button').css('visibility', 'visible');"></a>
        <a class="flex-next-button" href="#" onclick="$('#slider').flexslider('next');"></a>
        <a class="flex-prev-button" href="#" onclick="$('#slider').flexslider('prev');"></a>
      </div>
      <div id="carousel" class="flexslider">
        <ul class="slides">
          <li>
            <img alt="asdf" src="img/1-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/2-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/3-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/4-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/5-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/6-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/7-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/8-small.jpg" />
          </li>
        </ul>
        <a class="flex-next-button" href="#" onclick="$('#carousel').flexslider('next');"></a>
        <a class="flex-prev-button" href="#" onclick="$('#carousel').flexslider('prev');"></a>
      </div>
      </section>

    </div>
  </div>
</body>

</html>


$（窗口）。加载（函数（）{
$（'旋转木马'）.flexslider({
动画：“幻灯片”，
控制导航：错误，
animationLoop:false，
方向导航：错误，
幻灯片放映：错误，
触摸：是的，
项目宽度：160，
项目保证金：3，
asNavFor:“#滑块”
});
$（“#滑块”）.flexslider({
开始：功能（滑块）{
$（'html'）.removeClass（'no-js'）；
slider.removeClass（“加载”）；
},
动画：“淡入淡出”，
幻灯片放映：错误，
方向导航：错误，
控制导航：是的，
触摸：是的，
useCSS:false，
幻灯片速度：3000，
动画速度：300，
同步：“旋转木马”
});
});
功能启动全屏（元素）{
if（element.requestFullscreen）{
元素。requestFullscreen（）；
}else if（element.mozRequestFullScreen）{
元素。mozRequestFullScreen（）；
}else if（element.webkitRequestFullscreen）{
元素。webkitRequestFullscreen（）；
}else if（element.msRequestFullscreen）{
元素。msRequestFullscreen（）；
}
$（'.slide_text'）.css（'bottom'，'5%'）；
$（'.slide_text'）.css（'zoom'，'1.5'）；
$（'.flex全屏启动'）.css（'可见性'，'隐藏'）；
$（'.flex全屏取消'）.css（'visibility'，'visible'）；
$（'.flex全屏取消'）.css（'top'，'20%）；
$（'.flex play button'）.css（'top'，'20%）；
$（'.flex pause button'）.css（'top'，'20%）；
$（'.flex next button'）.css（'bottom'，'30%'）；
$（'.flex-prev-button'）.css（'bottom'，'30%）；
$（'.flex-control-thumbs'）.css（'position'，'static'）；
}
函数取消全屏（）{
if（document.exitFullscreen）{
document.exitFullscreen（）；
}else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}else if（document.webkitExitFullscreen）{
document.webkitExitFullscreen（）；
}else if（document.msexit全屏）{
document.msExitFullscreen（）；
}
$（'.slide_text'）.css（'bottom'，'2%'）；
$（'.slide_text'）.css（'zoom'，'1'）；
$（'.flex全屏启动'）.css（'visibility'，'visible'）；
$（'.flex全屏取消'）.css（'可见性'，'隐藏'）；
$（'.flex全屏启动'）.css（'top'，'6%）；
$（'.flex play button'）.css（'top'，'6%'）；
$（'.flex pause button'）.css（'top'，'6%'）；
$（'.flex next button'）.css（'bottom'，'54%'）；
$（'.flex-prev-button'）.css（'bottom'，'54%）；
$（'.flex-control-thumbs'）.css（'position'，'absolute'）；
}

在这个JSFIDLE中，它可以工作

奇怪。它对我也有效，但是如果我将它与localhost一起使用，它就不起作用了。你没有改变什么，对吧？我只改变了图像。对于按钮，我在里面放了一些文字，这样我就可以看到它们了！你帮了我很多。因为你，我意识到了我的错误。我使用了不正确的jQuery文件。我下载了最新的，现在它工作得很好。JSFIDLE全屏代码在手机上不起作用。Iphone和Android已经过测试。你能帮忙吗？很多移动浏览器都不支持它。

Hope this helps