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));