我是編碼和編程新手，我已經(jīng)嘗試獲取要在頁面上顯示的幻燈片的控制編號，但我仍然收到此錯誤消息：script.js：48未捕獲類型錯誤：無法在加載（script.js：23）時在開始（script.js：48）時讀取null的屬性'appendChild'在script.js：51開始@ script.js：48加載@腳本.js:23（匿名）@ script.js:51"有人能告訴我為什么會發(fā)生這種情況嗎？我的代碼如下。const controls = document.querySelector(".controls");const container = document.querySelector(".thumbnailcontainer");const allBox = container.children;const containerWidth = container.offsetWidth;const margin = 30;var item = 0;var totalItems = 0;// item setup per slideresponsive =?? [ { breakPoint: { width:? ? 0, item: 1 }} // if width greater than? ? 0 (1 will item show)? , { breakPoint: { width:? 600, item: 2 }} // if width greater than? 600 (2 will item show)? , { breakPoint: { width: 1000, item: 6 }} // if width greater than 1000 (4 will item show)? ]?function load() {? for (let i = 0; i < responsive.length; i++) {? ? if (window.innerWidth > responsive[i].breakPoint.width) {? ? ? items = responsive[i].breakPoint.item? ? }? }? start();}function start() {? var totalItemsWidth = 0? for (let i = 0; i < allBox.length; i++) {? ? //width and margin setup of items? ? allBox[i].style.width = (containerWidth / items) - margin + "px";? ? allBox[i].style.margin = (margin / 2) + "px";? ? totalItemsWidth += containerWidth / items;? ? totalItems++;? }? //tumbnail-container width set up? container.style.width = totalItemsWidth + "px";? //slides controls number set up? const allSlides = Math.ceil(totalItems / items);? const ul = document.createElement("ul");? for (let i = 1; i <= allSlides; i++) {? ? const li = document.createElement("li");? ? li.id = i;? ? li.innerHTML = i;? ? li.setAttribute("onclick", "controlSlides(this)");? ? ul.appendChild(li);? }? controls.appendChild(ul);}window.onload = load();
1 回答
幕布斯7119047
TA貢獻1794條經(jīng)驗 獲得超8個贊
你的班級名稱錯誤
const controls = document.querySelector(".controls");
const container = document.querySelector(".thumbnailcontainer");
const allBox = container.children;
const containerWidth = container.offsetWidth;
const margin = 30;
var item = 0;
var totalItems = 0;
// item setup per slide
responsive =
[ { breakPoint: { width: 0, item: 1 }} // if width greater than 0 (1 will item show)
, { breakPoint: { width: 600, item: 2 }} // if width greater than 600 (2 will item show)
, { breakPoint: { width: 1000, item: 6 }} // if width greater than 1000 (4 will item show)
]
function load() {
for (let i = 0; i < responsive.length; i++) {
if (window.innerWidth > responsive[i].breakPoint.width) {
items = responsive[i].breakPoint.item
}
}
start();
}
function start() {
var totalItemsWidth = 0
for (let i = 0; i < allBox.length; i++) {
//width and margin setup of items
allBox[i].style.width = (containerWidth / items) - margin + "px";
allBox[i].style.margin = (margin / 2) + "px";
totalItemsWidth += containerWidth / items;
totalItems++;
}
//tumbnail-container width set up
container.style.width = totalItemsWidth + "px";
//slides controls number set up
const allSlides = Math.ceil(totalItems / items);
const ul = document.createElement("ul");
for (let i = 1; i <= allSlides; i++) {
const li = document.createElement("li");
li.id = i;
li.innerHTML = i;
li.setAttribute("onclick", "controlSlides(this)");
ul.appendChild(li);
}
controls.appendChild(ul);
}
window.onload = load();
* {
box-sizing: border-box;
}
.thumbnailslider {
width: 100%;
float: left;
overflow: hidden;
}
.thumbanilslider .thumbnailcontainer {
width: 100%;
float: left;
}
.thumbnailslider .artitem {
height: 175px;
background-color: grey;
line-height: 175px;
text-align: center;
font-size: 50px;
color: #ffffff;
float: left;
}
<div class="thumbnailslider">
<div class="thumbnailcontainer">
<div class="artitem"> 1 </div>
<div class="artitem"> 2 </div>
<div class="artitem"> 3 </div>
<div class="artitem"> 4 </div>
<div class="artitem"> 5 </div>
<div class="artitem"> 6 </div>
<div class="artitem"> 7 </div>
<div class="artitem"> 8 </div>
<div class="artitem"> 9 </div>
<div class="artitem"> 10 </div>
</div>
<!-- Control Slides -->
<div class="controls">
</div>
</div>
- 1 回答
- 0 關(guān)注
- 81 瀏覽
添加回答
舉報
0/150
提交
取消