gpt4 book ai didi

javascript - 在我检查元素之前,Jquery boxslider 不会加载

转载 作者:行者123 更新时间:2023-11-28 16:55:46 25 4
gpt4 key购买 nike

我正在制作我的作品集,您可以访问 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com