堆栈内存溢出
  简体   繁体   English

Flexslider jQuery插件无法运行幻灯片

[英]Flexslider jQuery plugin won't run slideshow

 原文  2016-10-22 20:45:51  4   2    javascript/ jquery/ html

问题描述

I am a refactoring code for a website I am making and I am trying to use Flexslider jQuery plugin instead of AnythingSlider plugin I was originally used. 我是我正在制作的网站的重构代码，并且尝试使用Flexslider jQuery插件而不是最初使用的AnythingSlider插件。 I downloaded the plugin and followed the directions on the website ( Flexslider website ) for how to get started with the plugin. 我下载了插件，并按照网站（ Flexslider网站 ）上的说明开始使用插件。 However, the pictures in the ul class "slides" are still in a list form and don't appear as a slideshow. 但是，ul类“幻灯片”中的图片仍处于列表形式，并且不会显示为幻灯片。 Here is my current code: 这是我当前的代码： 

 $(document).ready(function(){ /* alert('Our JavaScriipt is working!'); console.log('Our Javascript is working!'); console.warn('A dire warning!'); console.error('ERMAGERD AN ERROR!'); */ var modalContainer = $("#modal-container"); var hideModal = function() { modalContainer.hide(); }; var showModal = function() { modalContainer.show(); }; var modalShowButton = $("#modal-show"); modalShowButton.on("click", showModal); var modalCloseButton = $("#modal-hide"); modalCloseButton.on("click", hideModal); $(document).on("keyup", function(evt) { evt = evt || window.event; if (evt.keyCode === 27) { hideModal(); } }); var handleNewsletterSignup = function(evt) { evt.preventDefault(); var newsletterHeader = $("#newsletter-header"); var newsletterForm = $("#newsletter-signup"); newsletterForm.hide(); newsletterHeader.text("Thank you for signing up!"); setTimeout(hideModal, 2000); }; var newsletterForm = $("#newsletter-signup"); newsletterForm.on("submit", handleNewsletterSignup); /* Begin the clock code */ var clockTime = function() { var currentTime = new Date(); var hours = currentTime.getHours(); var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); if (hours <= 11) { var period = "AM"; } else { var period = "PM"; } if (hours > 12) { hours = hours - 12; } else if (hours === 0) { hours = 12; } if (minutes < 10) { minutes = "0" + String(minutes); } if (seconds < 10) { seconds = "0" + String(seconds); } var time = hours + ':' + minutes + ':' + seconds + ' ' + period; return time; } var clock = $("#clock"); setInterval(function() { clock.text(clockTime()); }, 1000); }); 
  <head> <title>Liz Lemon's Personal Website</title> <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jQuery.flexslider.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({; animation: "slide", animationLoop: true, slideshow: true; randomize: false, }); }); </script> </head> <body> <div class="page"> <header> <h1>Liz Lemon's Personal Website</h1> <img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot"> </header> <h4> The current time is... <span id="clock">Clock goes here</span> </h4> <blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote> <section id="bio"> <h2>About me</h2> <p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on <a href="http://www.skillcrush.com" alt="Skillcrush.com">Skillcrush</a>. </p> </section> <div class="flexslider"> <ul class="slides"> <li><img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/></li> <li><img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/></li> <li><img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/></li> </ul> </div> <section id="contact"> <h2>Contact</h2> <div id="social-icons"> <a href="#"> <img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon"> </a> </div> </section> <button id="modal-show">Join the Lemon List</button> <div id="modal-container"> <section id="modal-box"> <button id="modal-hide">x</button> <h2 id="newsletter-header">Sign up for my email list!</h2> <form id="newsletter-signup" action="#" method="post" accept-charset="utf-8"> <input type="email" name="email" value="" placeholder="Your email"> <input type="submit" value="Sign up"> </form> </section> </div> <footer> <p>&copy; Skillcrush 2014</p> </footer> </div> </body>

So far I have triple checked every single part of my code (especially what is in the head) with the sample ones on the website and github. 到目前为止，我已经通过网站和github上的示例代码对代码的每个部分（尤其是头部中的代码）进行了三重检查。 I also tried moving some of the JS to the JS file. 我还尝试将某些JS移到JS文件中。 Despite these changes, the pictures in slides class remain a bullet point list. 尽管有这些更改，幻灯片类中的图片仍然是项目符号列表。 Did I link the wrong files for flexslider? 是否为flexslider链接了错误的文件？ I think my issue is with the HTML section, but I'm not 100% positive since my code looks the same as the ones on the sample page. 我认为我的问题与HTML部分有关，但我并不是100％肯定，因为我的代码与示例页面上的代码相同。

2 个解决方案

解决方案1
 0  2016-10-22 20:56:29

I think error in your CSS and JS inclusion. 我认为您的CSS和JS包含错误。 

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>

Like it should be: 喜欢它应该是： 

<script type="text/javascript" src="http://www.domain.com/myphysicaldirectory/js/jQuery.flexslider.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.domain.com/myphysicaldirectory/css/flexslider.css" media="all" />

Set your JS and CSS Path properly and open your source code (ctrl + u) and check its include properly or not. 正确设置您的JS和CSS路径，然后打开源代码（ctrl + u）并检查其是否正确包含。 also check included path open correctly in browser or not. 还要检查是否在浏览器中正确打开了包含的路径。

解决方案2
 0  2016-11-03 18:18:17

When you download flexslider zip file then inside that demo folder, create one test.html file and add below code in it. 当您下载flexslider zip文件时，然后在该演示文件夹中，创建一个test.html文件并在其中添加以下代码。 

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta content="charset=utf-8">
    <title>Liz Lemon's Personal Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">   

  <!-- Demo CSS -->
    <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />

    <!-- Modernizr -->
  <script src="js/modernizr.js"></script>

</head>
<body class="loading">

  <div id="container" class="cf">
    <header>
      <h1>Liz Lemon's Personal Website</h1>
      <img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
    </header>
    <h4>
      The current time is...
      <span id="clock">Clock goes here</span>
    </h4>

    <blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>

    <section id="bio">
      <h2>About me</h2>
      <p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on <a href="http://www.skillcrush.com" alt="Skillcrush.com">Skillcrush</a>.
      </p>
    </section>

    <div id="main" role="main">
      <section class="slider">
        <div class="flexslider carousel">
          <ul class="slides">
            <li>
                <img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
                </li>
                <li>
                <img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
                </li>  
                <li>
                <img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
                </li>               
            <li>
                <img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
                </li>
                <li>
                <img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
                </li>  
                <li>
                <img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
                </li> 
            <li>
                <img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
                </li>
                <li>
                <img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
                </li>  
                <li>
                <img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
                </li> 
          </ul>
        </div>
      </section>

      <section id="contact">
      <h2>Contact</h2>
      <div id="social-icons">
        <a href="#">
          <img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
        </a>
      </div>
    </section>

    <button id="modal-show">Join the Lemon List</button>
    <div id="modal-container">
        <section id="modal-box">
            <button id="modal-hide">x</button>
                <h2 id="newsletter-header">Sign up for my email list!</h2>
                <form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
                    <input type="email" name="email" value="" placeholder="Your email">
                    <input type="submit" value="Sign up">
                </form>
        </section>
    </div>

    <footer>
      <p>&copy; Skillcrush 2014</p>
    </footer>

    </div>

  </div>

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

  <!-- FlexSlider -->
  <script defer src="../jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 420,
        itemMargin: 1,
        pausePlay: true,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>
</body>
</html>

I already test it. 我已经测试过了 its running fine. 运行良好。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法获取Jquery插件运行幻灯片 - Can't get Jquery plugin to run slideshow jQuery 幻灯片不会循环播放 - jQuery Slideshow won't Loop jQuery幻灯片不会遍历dom - jquery slideshow won't iterate over dom jQuery幻灯片代码无法正常工作 - jQuery slideshow code won't work jQuery Cycle插件-幻灯片 - JQuery Cycle plugin - Slideshow 带有.load（）的jQuery幻灯片插件 - jQuery slideshow plugin with .load() jQuery内容幻灯片插件？ - jQuery content slideshow plugin? 在Wordpress中使用NextGen Gallery插件运行幻灯片放映时出现jQuery错误 - JQuery error when run slideshow with NextGen Gallery plugin in wordpress 带有jQuery的简单幻灯片（不会超出第一个孩子） - Simple slideshow with jQuery (won't go beyond first child) 如何在drupal 6中将库添加到模块文件中（以运行由flexslider创建的幻灯片） - How to add a library in drupal 6 into a module file ( to run a slideshow created by flexslider )
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM