0
請耐心等待，雖然我有一個副學士學位，我現在感覺很失落。就我而言，這仍然是一個新手。我有一個2列布局，並沒有設置正確的我敢肯定，因爲我右邊的列保證金似乎出了問題。我在每邊都有一個幻燈片放映。我的幻燈片都沒有工作。他們只是展示最後的照片。此外，我的頁腳在我的幻燈片背後，而不是在他們的下面。我嘗試添加和刪除包含和不包含頁腳的容器div，但似乎都沒有將它放在正確的位置。我使用之前用於幻燈片的不同項目的代碼，但它在這裏沒有以相同的方式響應。我的幻燈片功能沒有名稱，因爲上次我使用它們時，它們只能在沒有名稱的情況下工作。我知道幾個變量沒有被定義，但是再一次，它沒有定義。我不確定具體如何定義它們。我確信我可以忽略一些小事，但我已經走了幾次而找不到它。這裏是下面的代碼，CSS，HTML和JS ......我的幻燈片不能正常工作，我的頁腳不合適
/*footer*/
.footer {
margin: 10px;
padding: 5px;
width: 100%;
float: center;
border-top: dashed #bcbaba 3px;
}
/*page container*/
#container {
width: 1024px;
height: auto;
margin: 5px;
}
.left {
width: 506px;
float: left;
}
.right {
margin-left: 900px;
}
.clear {
clear: both;
}
<div class="container">
<!--Slideshow of created work-->
<div id="sites" class="left">
<div id="slideshow" class="slideshow">
<img id="bca" class="slide" src="../images/websites/bca/bcass.jpg"
alt="Billie's Custom Abstracs"/>
<img id="bw" class="slide" src="../images/websites/bw/bwss.jpg"
alt="Bellwood Museum"/>
<img id="sej" class="slide" src="../images/websites/sej/sejss1.jpg"
alt="self esteem journal" />
<img id="sej1" class="slide" src="../images/websites/sej/sejss3.jpg"
alt="meditation script" />
</div>
</div>
<div id="art" class="right">
<div id="slideshow1" class="slideshow1">
<img id="cbv1" class="slide1" src="../images/book/vol1/Abstracts and Fun
V1_Page_02.jpg" alt="coloring book volume 1"/>
<img id="cbv2" class="slide1" src="../images/book/vol2/pg 0.jpg"
alt="coloring book volume 2"/>
<img id="ap" class="slide1" src="../images/art/paintings/bluesnow.jpg"
alt="blue snow painting"/>
<img id="wd"class="slide1" src="../images/art/trinkets/lbh1.jpg" alt="wooden
trinkets"/>
</div>
</div>
</div>
<!--Footer-->
<div id="footer">
<p><b>Billie Cochell </b><br> phone <br> <a
href="mailto:[email protected]">[email protected]</a>
<br> <a
href="mailto:[email protected]">[email protected]</a>
</p>
<br>
</div>
//Home Page/Slideshow//
(function ($) {
var slideshow = (function() {
var counter = 0;
i,
j,
slides = $("#slideshow .slide");
slidesLen = slides.length - 1;
for (i = 0, j = 9999; i < slides.length; i += 1, j -= 1) {
$(slides[1]).css("z-index", j);
}
return {
startSlideshow: function() {
window.setInterval (function() {
if (counter === 0) {
slides.eq(counter).fadeOut();
counter += 1;
} else if (counter === slidesLen) {
counter = 0;
slides.eq(counter).fadeIn(function(){
slides.fadeIn();
});
} else {
slides.eq(counter).fadeOut();
counter += 1;
}
}, 7000);
}
};
}());
slideshow.startSlideshow();
}(jQuery));
(function ($) {
"use strict";
var slideshow2 = (function() {
var counter = 0;
i,
j,
slides = $("#slideshow1 .slide1");
slidesLen = slides.length - 1;
for (i = 0, j = 9999; i < slides.length; i += 1, j -= 1) {
$(slides[1]).css("z-index", j);
}
return {
startSlideshow: function() {
window.setInterval (function() {
if (counter === 0) {
slides.eq(counter).fadeOut();
counter += 1;
} else if (counter === slidesLen) {
counter = 0;
slides.eq(counter).fadeIn(function(){
slides.fadeIn();
});
} else {
slides.eq(counter).fadeOut();
counter += 1;
}
}, 7000);
}
};
}());
slideshow2.startSlideshow();
}(jQuery));