个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在制作我的作品集，您可以访问 here . onclick 命令用于隐藏和显示我的作品中的不同 div。
我找到了一个 boxslider 代码来帮助展示我的照片，但是当我最初加载页面时，框架是空的。只有在我检查元素后，图片才会出现。
我也一直收到这个错误，我很确定这与 boxslider 框架没有加载我的图片有关:
Uncaught TypeError: Cannot read property 'style' of null
这是 boxslider 框架的 css 的一部分:
.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
*zoom: 1;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.bx-wrapper img {
max-width: 90%;
display: block;
}
.bxslider {
margin: 0 auto;
padding: 0 auto;
}
ul.bxslider {
list-style: none;
}
.bx-viewport {
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
background: #fff;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url('images/bx_loader.gif') center center no-repeat #ffffff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
最佳答案
您应该尝试单独设置每个 bxSlider。在你的js.js文件这样做:
var wood = $(".wood").bxSlider();
var book = $(".book").bxSlider();
var bw = $(".bw").bxSlider();
并在您的 HTML 中执行此操作:
<ul class="wood">
<li>.....
<ul class="book">
<li>.....
<ul class="bw">
<li>.....
只是一个建议
，如果您使用 HTML5(您使用的是 <!doctype html> )，则不应使用 <center>它甚至在 HTML4 中已被弃用。实际上摆脱那些<center>我很确定使用 HTML5 可能会完全拒绝渲染它们，因此错误代码调用 <center> null .
你还有这个:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- image slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
你只需要其中之一。
一旦你完成了这 3 件事但仍未修复，我又有一个想法。
关于javascript - 在我检查元素之前，Jquery boxslider 不会加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32161304/
25
4
0
我正在修复一些小问题并向 friend 的网站添加一些图片和食谱 http://mariorizzotti.com几年前谁让网页设计师制作了它。无论如何，我一直在添加一些图片并更改一些 css，我遇到
当我们在浏览器上运行页面时，Boxslider 插件可以工作，但如果我们在 Sitecore Preview 模式下运行相同的页面(在 Sitecore 中:单击顶部菜单中的 Presentation
我正在制作我的作品集，您可以访问 here . onclick 命令用于隐藏和显示我的作品中的不同 div。 我找到了一个 boxslider 代码来帮助展示我的照片，但是当我最初加载页面时，框架是空
我是一名优秀的程序员,十分优秀！