Question

我要创建幻灯片 CSS ，但屏幕溢出

.slideshow {
  width: 100%;
  overflow-x: scroll;
  transition: all 1s;
}
.slideshowImageOne {
  width: 93%;
  transform: translate3d(0px, 0px, 0px);
  height:200px;
  background: #1A2980;
  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #26D0CE, #1A2980);
  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #26D0CE, #1A2980);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  display: flex;
  border-radius: 10px;
  position: absolute;
}
.slideshowImageTwo {
  width: 93%;
  transform: translate3d(105%, 0px, 0px); 
  height: 200px;
  background: #f46b45;
  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #eea849, #f46b45);
  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #eea849, #f46b45);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  border-radius: 10px;
  position: absolute;
}

<h1>Header</h1>
<div class="slideshow">
                  <div class="slideshowImageOne">HELLO</div>
                  <div class="slideshowImageTwo">NAMSTEY</div>
</div>

.slideshow 是主要类，。 slideshowImageOne 是一个div，另一个是

。

我要修复标题并正确播放幻灯片。

Answer 1

我已在此文件中添加了一个脚本，并从.slideshowImageOne和.slideshowImageTwo中删除了transform属性。

<style>
.slideshowImage {display:none;}
.slideshowImageOne {
    width:93%;
  height:200px;
  background: #1A2980;
  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #26D0CE, #1A2980);
  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #26D0CE, #1A2980);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  display: flex;
  border-radius: 10px;
  position: absolute;
}
.slideshowImageTwo {
  width:93%;
  height: 200px;
  background: #f46b45;
  /* fallback for old browsers */

  background: -webkit-linear-gradient(to right, #eea849, #f46b45);
  /* Chrome 10-25, Safari 5.1-6 */

  background: linear-gradient(to right, #eea849, #f46b45);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  border-radius: 10px;
  position: absolute;
}
</style>

<body>
<h1>Header</h1>
<div class="slideshow">
                  <div class="slideshowImage slideshowImageOne">HELLO</div>
                  <div class="slideshowImage slideshowImageTwo">NAMSTEY</div>
</div>

<script>
var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("slideshowImage");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 2000); 
}
</script>
</body>

希望这会有所帮助。

我想创建幻灯片CSS

1 个答案: