我的幻灯片不能正常工作，我的页脚不合适

问题描述：

请耐心等待，虽然我有一个副学士学位，我现在感觉很失落。就我而言，这仍然是一个新手。我有一个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));

答

我可以看到有一个不必要的闭幕前，我想每一个DIV ID应该被关闭，而不是>，因为ID被用于一个元素

答

它看起来像你遇到了一些CSS/JavaScript麻烦。有很多不同的方式来完成的幻灯片，所以我想在这里向您链接到一些例子/教程，如果你有兴趣：

https://www.w3schools.com/howto/howto_js_slideshow.asp
https://www.w3schools.com/w3css/w3css_slideshow.asp
http://www.makeuseof.com/tag/how-to-build-javascript-slideshow/
https://codepen.io/gabrieleromanato/pen/dImly

也有俗套和开箱即用的选项：

http://wowslider.com/javascript-slideshow-quiet-rotate-demo.html
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

有更多的负载，这些都是这里是回味无穷。

至于你写的代码：

首先第一件事情，你需要将范围缩小与一些CSS幻灯片框架。您可以通过为左右幻灯片设置高度/宽度并将溢出设置为无，从而隐藏帧外的所有内容来实现此目的。

.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

我删除您之前使用的封闭结构，因为正是你想要的两个幻灯片（因此，我们可以重用的单一功能产生两种不同的合作相同的功能ntexts）。如果您对封闭结构有任何疑问，这也可能有所帮助：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

我的幻灯片不能正常工作，我的页脚不合适

相关推荐