Flexslider jQuery插件不会运行幻灯片

时间:2016-10-22 20:45:52

标签: javascript jquery html

我是我正在制作的网站的重构代码,我正在尝试使用Flexslider jQuery插件而不是我最初使用的AnythingSlider插件。我下载了该插件,并按照网站上的说明(Flexslider website)了解如何开始使用该插件。但是,ul类“幻灯片”中的图片仍然是列表形式,不会显示为幻灯片。这是我目前的代码:

$(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>
		 	

到目前为止,我已经对网站和github上的示例代码进行了三次检查(特别是头部内容)。我也尝试将一些JS移动到JS文件中。尽管有这些变化,幻灯片类中的图片仍然是一个项目符号列表。我是否为flexslider链接了错误的文件?我认为我的问题在于HTML部分,但由于我的代码看起来与示例页面上的代码相同,所以我不是100%肯定的。

2 个答案:

答案 0 :(得分:0)

我认为你的CSS和JS包含错误。

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

喜欢它应该是:

<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" />

正确设置JS和CSS路径并打开源代码(ctrl + u)并正确检查其包含。还要检查包含的路径是否在浏览器中正确打开。

答案 1 :(得分:0)

当您下载flexslider zip文件然后在该demo文件夹中时,创建一个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>

我已经测试过了。它运行良好。