2016-02-11 42 views
1

This is what happens when I run this currently
With PicturesBXSlider不工作,试图修复一般没有运气,没有浏览器的工作原理

编辑补充全码: 感谢您的帮助。仍然不知道发生了什么问题。 当在任何浏览器中运行时,它将显示为如上所示的有序图像列表。

<!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> 

回答

0

一切正常,记得要导入插件库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/

+0

还只是出来作为一个图像无序列表 –

+0

显示在主帖后编辑 –

+0

你需要照片?类似的东西https://jsfiddle.net/cmedina/r4tabkxe/1/ – CMedina

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>