我使用BXSlider并在一个页面上有多个幻灯片。我试图使用锚标签让我链接到页面上的正确位置，但它总是最终到达页面的底部（可能是因为这是链接转到页面重新定位的位置一旦所有图像都已加载，就会自己。）
我已经尝试将所有图像的宽度和高度放入其中以查看是否有效但无变化。
有什么想法吗？
<!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" xml:lang="EN" lang="EN" dir="ltr">
<head>
<title>Brady Joiners | Gallery | Joinery Scotland</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/layout.css" type="text/css" />
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- bxSlider CSS file -->
<link rel="stylesheet" href="css/jquery.bxslider.css" type="text/css" />
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-min.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src="scripts/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
adaptiveHeight: true,
captions: false,
mode:'fade',
speed:1000,
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider2').bxSlider({
minSlides: 3,
maxSlides: 4,
slideWidth: 256,
slideMargin: 10
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider3').bxSlider({
minSlides: 3,
maxSlides: 4,
slideWidth: 256,
slideMargin: 10
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider4').bxSlider({
adaptiveHeight: true,
captions: false,
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider5').bxSlider({
adaptiveHeight: true,
captions: false,
mode:'fade',
speed:1000,
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider6').bxSlider({
adaptiveHeight: true,
captions: false,
mode:'fade',
speed:1000,
});
});
</script>
</head>
<body id="top">
<!-- ####################################################################################################### -->
<?php include('templates/top.php'); ?>
<!-- ####################################################################################################### -->
<div class="wrapper col4">
<div id="container" class="clear">
<!-- ####################################################################################################### -->
<?php include('templates/call-to-action.php'); ?>
<!-- ####################################################################################################### -->
<h1>Examples of Brady Joiners Work</h1>
<p>Some examples of our work can be viewed below, for further details on any type of work contact us using either the numbers, email address of contact form below.</p>
<h2 id="kitchens">Kitchens</h2>
<div class="slider"><ul class="bxslider5" style="margin:0px; padding:0px">
<li style="width:960px;height:637px"><img src="/images/gallery/traditional-kitchen.jpg" width="960" height="637" /></li>
<li style="width:960px;height:637px"><img src="/images/gallery/contemporary-wood-kitchen.jpg" width="960" height="637" /></li>
<li style="width:960px;height:637px"><img src="/images/gallery/modern-wood-kitchen.jpg" width="960" height="637" /></li>
<li style="width:960px;height:637px"><img src="/images/gallery/modern-kitchens.jpg" width="960" height="640" /></li>
</ul>
</div>
<h2 id="garages">Garage Doors & External Gates</h2>
<div class="slider"><ul class="bxslider" style="margin:0px; padding:0px">
<li style="width:960px;height:717px"><img src="/images/gallery/garage-doors.jpg" width="960" height="717" /></li>
<li style="width:960px;height:717px"><img src="/images/gallery/garage-doors2.jpg" width="960" height="717" /></li>
<li style="width:960px;height:720px"><img src="/images/gallery/gates.jpg" width="960" height="720" /></li>
</ul>
</div>
<h2 id="lofts">Loft Conversions</h2>
<div class="slider"><ul class="bxslider7" style="margin:0px; padding:0px ; text-align:center">
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-2.jpg" height="720" /></li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-3.jpg" height="720" /></li>
<li style="height:720px">
<div align="center"><img src="/images/gallery/loft/loft-conversion-4.jpg" height="720" /></div>
</li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-5.jpg" height="720" /></li>
<li style="height:720px">
<div align="center"><img src="/images/gallery/loft/loft-conversion-6.jpg" height="720" /></div>
</li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-7.jpg" height="720" /></li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-8.jpg" height="720" /></li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-9.jpg" height="720" /></li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-10.jpg" height="720" /></li>
<li style="height:720px">
<div align="center"><img src="/images/gallery/loft/loft-conversion-11.jpg" height="720" /></div>
</li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-12.jpg" height="720" /></li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-13.jpg" height="720" /></li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-14.jpg" height="720" /></li>
<li style="height:720px"><img src="/images/gallery/loft/loft-conversion-15.jpg" height="720" /></li>
</ul>
</div>
<h2 id="decking">Decking</h2>
<div class="slider"><ul class="bxslider2">
<li style="width:256px;height:207px"><img src="/images/gallery/asian-landscape.jpg" width="256" height="207" /></li>
<li style="width:256px;height:191px"><img src="/images/gallery/decking-with-fence.jpg" width="256" height="191" /></li>
<li style="width:256px;height:192px"><img src="/images/gallery/decking.jpg" width="256" height="192" /></li>
<li style="width:256px;height:192px"><img src="/images/gallery/decking2.jpg" width="256" height="192" /></li>
<li style="width:256px;height:192px"><img src="/images/gallery/decking3.jpg" width="256" height="192" /></li>
<li style="width:256px;height:192px"><img src="/images/gallery/decking4.jpg" width="256" height="192" /></li>
</ul>
</div>
<h2 id="custom">Custom Work, Bespoke Furniture & Walk-in Wardrobes</h2>
<div class="slider"><ul class="bxslider3">
<li style="width:257px;height:192px"><img src="/images/gallery/bespoke-bay-window.jpg" width="257" height="192" /></li>
<li style="width:257px;height:192px"><img src="/images/gallery/bespoke-bay-window2.jpg" width="257" height="192" /></li>
<li style="width:257px;height:191px"><img src="/images/gallery/walk-in-wardrobe.jpg" width="257" height="191" /></li>
<li style="width:257px;height:192px"><img src="/images/gallery/custom-desk.jpg" width="257" height="192" /></li>
<li style="width:257px;height:192px"><img src="/images/gallery/custom-desk2.jpg" width="257" height="192" /></li>
</ul>
</div>
<h2 id="cabins">External, Outdoors & Cabins</h2>
<div class="slider"><ul class="bxslider4">
<li style="width:963px;height:716px"><img src="/images/gallery/cabin.jpg" width="963" height="716" /></li>
</ul>
<p> </p>
</div>
<!-- <div class="gallery clear">
<ul>
<li class="first"><a href="images/gallery/garage-doors.jpg"><img src="images/gallery/garage-doors.jpg" alt="" width="572" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 1"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 2"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 3"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 4"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li class="first"><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 5"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 6"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 7"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 8"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 9"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li class="first"><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 10"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 11"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 12"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 13"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 14"><img src="images/demo/gallery/174x150.gif" alt="" /></a></li>
</ul>
</div>
-->
<!-- ####################################################################################################### -->
<!-- <div class="pagination">
<ul>
<li class="prev"><a href="#">« Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="splitter">…</li>
<li><a href="#">6</a></li>
<li class="current">7</li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li class="splitter">…</li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li class="next"><a href="#">Next »</a></li>
</ul>
</div>-->
<!-- ####################################################################################################### -->
<div class="clear"></div>
</div>
</div>
<!-- ####################################################################################################### -->
<?php include('templates/bottom.php'); ?>
</body>
</html>