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>
最佳答案
必须在head中导入插件
<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>
关于javascript - BXSlider 不工作，尝试了一般修复但没有成功，没有浏览器工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35350672/