Question

This is what happens when I run this currently
With Pictures

编辑添加完整代码：谢谢你的帮助。仍然不知道它出了什么问题。在任何浏览器中运行时，它将显示为有序的图像列表，如上所示。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lauren Woods Photography</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="layout/styles/layout.css" type="text/css" />
</head>
<body id="top">


<!-- FACEBOOK -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>




<script src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">

    $('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
});
</script>
<!-- 
<link href="BoxSlider/jquery.bxslider.css" rel="stylesheet" />

 -->



<div class="wrapper col2">
  <div id="header">
    <div id="logo">
      <h1><a href="default.html">LOGO</a></h1>
    </div>
    <h1 align="center">Lauren Woods Photography</h1>
    <ul id="topnav">

      <li class="last"><a href="#">Contact me</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a>
        <ul>
          <li><a href="#">Project 1</a></li>
          <li><a href="#">Project 2</a></li>
          <li><a href="#">Project 3</a></li>
          <li><a href="#">Project 4</a></li>
        </ul>
      </li>
      <li class="active"><a href="default.html">Home</a></li>
    </ul>
    <br class="clear" />
  </div>
</div>
    <ul class="bxslider">
        <li><img src="images/demo/60x60.gif"/></li>
        <li><img src="images/demo/60x60.gif"/></li>
        <li><img src="images/demo/60x60.gif"/></li>
        <li><img src="images/demo/60x60.gif"/></li>

    </ul>

<div class="wrapper col4">
</div>
<div class="wrapper col5">
  <div id="container">
    <div class="fb-page" data-href="https://www.facebook.com/LaurenWoodsPhoto" data-tabs="timeline,photo" data-small-header="false" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/LaurenWoodsPhoto"><a href="https://www.facebook.com/LaurenWoodsPhoto">Lauren Woods Photography</a></blockquote></div></div>
    <div id="column">

      <div class="flickrbox">
        <h2 class="title">Flickr</h2>
        <ul>
          <li><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></li>
          <li><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></li>
          <li class="last"><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></li>
          <li><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></li>
          <li><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></li>
          <li class="last"><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></li>
        </ul>
        <br class="clear" />
      </div>
    </div>
    <br class="clear" />
  </div>
</div>



</body>
</html>

Answer 1

你必须在脑袋中导入插件

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lauren Woods Photography</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="layout/styles/layout.css" type="text/css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
</head>

Answer 2

一切正常，请记得导入插件库bxslider

<script src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">

    $('.bxslider').bxSlider({
      infiniteLoop: false,
      hideControlOnEnd: true
    });
</script>
<link href="BoxSlider/jquery.bxslider.css" rel="stylesheet" />

https://jsfiddle.net/cmedina/r4tabkxe/

BXSlider不工作，尝试了一般修复，没有运气，没有浏览器工作

2 个答案: