Question

请耐心等待我，虽然我有副学士学位，但我现在感觉很失落。就我而言，还是一个新手。我有一个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:billiespages@gmail.com">billiespages@gmail.com</a>
    <br> <a 
href="mailto:billie.child79@gmail.com">billie.child79@gmail.com</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));

Answer 1

我可以看到，在不必要的结束之前，我认为每个div id都应该关闭而不是＆gt;因为id用于一个元素

Answer 2

看起来您遇到了一些css / javascript问题。有很多不同的方法来完成幻灯片放映，所以我想在这里链接到一些示例/教程，以防您感兴趣：

还有cookie切割器和开箱即用的选项：

还有更多的东西，这些都是值得深思的。

关于您编写的代码：

首先，您需要使用一些CSS来缩小幻灯片框架的范围。您可以通过设置左右幻灯片的高度/宽度并将overflow设置为none来完成此操作，以便隐藏框架外的所有内容。

.container {
  width: 1024px;
  height: auto;
  margin: 5px;
}

.left, .right {
  width: 460px;
  height: 506px;
  overflow: hidden;
  float: left;
  position: relative;
  margin: 5px;
}

然后，由于您使用了淡化效果而不是位置效果，因此需要将图像一个放在另一个上面，因此我们希望图像都已经就位。

.left .slideshow img, .right .slideshow img {
  position: absolute;
  top: 0;
}

对于javascript，我们总是希望淡出图像并淡化另一个图像，唯一改变的是计数器，我们可以使用以下函数完成：

function changeImage() {
      slides.eq(counter).fadeOut(1000);
      if (counter >= slidesLen) {
        counter = 0;
      } else {
        counter += 1;
      }
      slides.eq(counter).fadeIn(1000);
}

我在这里设置了一个codepen来说明这种方法：https://codepen.io/anon/pen/bojNqK

我删除了之前使用的闭包结构，因为您希望两个幻灯片显示完全相同的功能（因此我们可以重用单个函数来生成两个不同的上下文）。如果您对闭包结构有疑问，这也可能会有所帮助：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

我的幻灯片无效，我的页脚也不合适

2 个答案: