幻灯片溢出？

时间：2017-08-08 14:05:52

标签： javascript html css

所以我有一个有效的幻灯片。我的问题是，有些图像超过了html宽度，这就是为什么有一个滚动效果，我不想拥有它。如果我使用css属性overflow-x：hidden，显示屏上的图像将被切断。有没有办法在不切断图像的情况下去除滚动效果？ 这是我的问题图片：enter image description here 在那之下，我有我的工作代码。

var index = 1;

function plusIndex(n) {
    index = index + n;
    showImage(index);
}

showImage(1);

function showImage(n) {
    var i;
    var x = document.getElementsByClassName("slides");
    if (n > x.length) {
        index = 1
    };
    if (n < 1) {
        index = x.length
    };
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[index - 1].style.display = "block";
}
autoSlide();

function autoSlide() {
    var i;
    var x = document.getElementsByClassName("slides");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    if (index > x.length) {
        index = 1
    }
    x[index - 1].style.display = "block";
    index++;
    setTimeout(autoSlide, 2000);
}
* {
    /* valid for everything */
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background: #FAFAFA;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 2px;
}

h3 {
    text-align: left;
    padding: 1.5%;
    margin-left: 10%;
    border-bottom: 3px solid #A4A4A4;
    width: 15%;
}

li {
    text-decoration: none;
    list-style: none;
    margin: 1%;
    padding: 1%
}
/* slideshow for the products */

.cssSlider {
    width: 100%;
}

.sliderElements {
    list-style: none;
    position: relative;
    left: 0%;
    right: 0;
    width: 100%;
    display: -webkit-box;
    transition: left .8s ease-in-out;
    overflow-x: auto;
}

.sliderElements:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: auto;
}
/* Product details text slide */

.sliderElements> li {
    float: left;
    width: 8%;
    margin-left: 6%;
    height: 100px;
    /* figcaption move up & down here */
    position: relative;
    display: inline-block;
}
/*important to use the input-buttons; change the value to slide more or less 

*/

#slide2:checked~ .sliderElements {
    left: -30%;
}

#slide3:checked~ .sliderElements {
    left: -60%;
}

#slide4:checked~ .sliderElements {
    left: -80%;
}

#slide6:checked~ .sliderElements {
    left: -30%;
}

#slide7:checked~ .sliderElements {
    left: -60%;
}

#slide8:checked~ .sliderElements {
    left: -80%;
}

#slide10:checked~ .sliderElements {
    left: -30%;
}

#slide11:checked~ .sliderElements {
    left: -60%;
}

#slide12:checked~ .sliderElements {
    left: -80%;
}
/* Captiom of the picture position set */

.sliderElements figcaption {
    display: block;
    color: #000;
    position: absolute;
    left: 1;
    top: -1%;
    padding: .2em;
    font-size: .8em;
}
/* Images responsive */

.sliderElements img {
    width: 100%;
    border: 4px solid #7F7F7F;
}
/* inputs pushing out of the view */

.cssSlider input {
    position: absolute;
}
/* centering the controls - works in conjunction with inline-block */

.sliderControls {
    text-align: center;
}
/* Controls next to each other */

.sliderControls li {
    display: inline-block;
}
/* Controls identical and round off the corners  */

.sliderControls label {
    width: 15px;
    height: 15px;
    text-align: center;
    margin: 1%;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: #FFCC00;
    color: #FFCC00;
    font-size: 0.0em;
}
/* attribute selector and indirect descendant to control the labels  */

.sliderControls label:hover,
#slide1:checked~ .sliderControls label[for="slide1"],
#slide2:checked~ .sliderControls label[for="slide2"],
#slide3:checked~ .sliderControls label[for="slide3"],
#slide4:checked~ .sliderControls label[for="slide4"] {
    background: #ddd;
    color: #ddd;
}
<!-- ------------------------ viewing window for the FIRST slideshow ----------------------- -->
<div class="cssSlider">
    <h3 id="#mica">Test</h3>

    <!-- inputs to control the slider -->
    <input class="none" type="radio" name="slider" id="slide1" checked="checked">
    <input class="none" type="radio" name="slider" id="slide2">
    <input class="none" type="radio" name="slider" id="slide3">
    <input type="radio" name="slider" id="slide4">

    <!-- single slides are created as lists -->
    <ul class="sliderElements">
        <li>
            <!-- -------------------- add more products within the ul-tag -------- -->
            <figure>
                <!--------------------- figure-tag shows the products and the details ---------->
                <figcaption>Name</figcaption>
                <img src="/blume.jpg" alt="Product1" class="product">
            </figure>
        </li>

        <li>
            <figure>
                <figcaption>Name</figcaption>
                <img src="/blume.jpg" alt="Product2" class="product">
            </figure>
        </li>
        <li>
            <figure>
                <figcaption>Name</figcaption>
                <img src="/blume.jpg" alt="Product3" class="product">
            </figure>
        </li>
        <li>
            <figure>
                <figcaption>Name</figcaption>
                <img src="/blume.jpg" alt="Product4" class="product">
            </figure>
        </li>
        <li>
            <figure>
                <figcaption>Name</figcaption>
                <img src="/blume.jpg" alt="Product2" class="product">
            </figure>
        </li>
        <li>
            <figure>
                <figcaption>Name</figcaption>
                <img src="/blume.jpg" alt="Product3" class="product">
            </figure>
        </li>
        <li>
            <figure>
                <figcaption>Name</figcaption>
                <img src="/blume.jpg" alt="Product4" class="product">
            </figure>
        </li>
        <li>
            <figure>
                <figcaption>Name</figcaption>
                <img src="/blume.jpg" alt="Product4" class="product">
            </figure>
        </li>
        <li>
            <figure>
                <figcaption>Name</figcaption>
                <img src="/blume.jpg" alt="Product4" class="product">
            </figure>
        </li>
    </ul>

    <!-- Control  buttons-->
    <ul class="sliderControls">
        <li><label for="slide1">1</label></li>
        <li><label for="slide2">2</label></li>
        <li><label for="slide3">3</label></li>
        <li><label for="slide4">4</label></li>
    </ul>
</div>
<!-------------------------------------- ENDING of the FIRST slideshow -------------------------------------->

4 个答案:

答案 0 :(得分：0)

只需从overflow-x: auto班级

中删除.sliderElements即可 

      var index = 1;

function plusIndex(n){
index = index + n;
showImage(index);
}

showImage(1);

function showImage(n){
var i;
var x = document.getElementsByClassName("slides");
if(n > x.length) {index = 1};
if(n < 1){ index = x.length};
for(i=0;i<x.length;i++)
    {
        x[i].style.display ="none";
    }
x[index-1].style.display = "block";
}
autoSlide();
 function autoSlide(){
var i;
var x = document.getElementsByClassName("slides");
for(i=0;i<x.length;i++)
    {
        x[i].style.display ="none";
    }
if(index > x.length){ index = 1}
x[index-1].style.display = "block";
index++;
setTimeout(autoSlide,2000);
}
* {
/* valid for everything */
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: #FAFAFA;
}

html,
body {
width: 100%;
height: 100%;
margin: 0;
 padding: 0;
 box-sizing: border-box;
 letter-spacing: 2px;
}

 h3 {
    text-align: left;
  padding: 1.5%;
   margin-left: 10%;
    border-bottom: 3px solid #A4A4A4;
  width: 15%;
 }

  li {
    text-decoration: none;
   list-style: none;
     margin: 1%;
    padding: 1%
  }


 /* slideshow for the products */

 .cssSlider {
   width: 100%;
   
 }

  .sliderElements {
    list-style: none;
    position: relative;
   left: 0%;
  right: 0;
 width: 100%;
  display: -webkit-box;
  transition: left .8s ease-in-out;
  /*  overflow-x: auto; */
 }

 .sliderElements:after {
    content: ".";
    display: block;
   clear: both;
     visibility: hidden;
  font-size: 0;
  overflow: auto; 
}


/* Product details text slide */

.sliderElements > li {
 float: left;
 width: 8%;
 margin-left: 6%;
 height: 100px;
 /* figcaption move up & down here */
 position: relative;
  display: inline-block;
}


/*important to use the input-buttons; change the value to slide more or less 

*/

#slide2:checked ~ .sliderElements {
 left: -30%;
}

#slide3:checked ~ .sliderElements {
 left: -60%;
}

#slide4:checked ~ .sliderElements {
left: -80%;
}

#slide6:checked ~ .sliderElements {
 left: -30%;
}

#slide7:checked ~ .sliderElements {
 left: -60%;
}

#slide8:checked ~ .sliderElements {
 left: -80%;
}

#slide10:checked ~ .sliderElements {
 left: -30%;
}

#slide11:checked ~ .sliderElements {
left: -60%;
}

 #slide12:checked ~ .sliderElements {
 left: -80%;
  }


 /* Captiom of the picture position set */

 .sliderElements figcaption {
  display: block;
  color: #000;
  position: absolute;
  left: 1;
  top: -1%;
  padding: .2em;
  font-size: .8em;
}


 /* Images responsive */

 .sliderElements img {
  width: 100%;
  border: 4px solid #7F7F7F;
 }


/* inputs pushing out of the view */

.cssSlider input {
position: absolute;
}


/* centering the controls - works in conjunction with inline-block */

.sliderControls {
text-align: center;
}


/* Controls next to each other */

.sliderControls li {
display: inline-block;
}


 /* Controls identical and round off the corners  */

.sliderControls label {
  width: 15px;
   height: 15px;
 text-align: center;
 margin: 1%;
 border-radius: 50%;
  display: block;
 cursor: pointer;
  background: #FFCC00;
 color: #FFCC00;
 font-size: 0.0em;
}


/* attribute selector and indirect descendant to control the labels  */

.sliderControls label:hover,
#slide1:checked ~ .sliderControls label[for="slide1"],
#slide2:checked ~ .sliderControls label[for="slide2"],
#slide3:checked ~ .sliderControls label[for="slide3"],
#slide4:checked ~ .sliderControls label[for="slide4"] {
 background: #ddd;
color: #ddd;
}
 <div class="cssSlider">
          <h3 id="#mica">Test</h3>

          <!-- inputs to control the slider -->
          <input class="none" type="radio" name="slider" id="slide1" checked="checked">
          <input class="none" type="radio" name="slider" id="slide2">
          <input class="none" type="radio" name="slider" id="slide3">
          <input type="radio" name="slider" id="slide4">

          <!-- single slides are created as lists -->
          <ul class="sliderElements">
              <li><!---------------------- add more products within the ul-tag ---------->
                  <figure><!--------------------- figure-tag shows the products and the details ---------->
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product1" class="product" >
                  </figure>
              </li>

              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product2" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product3" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product4" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product2" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product3" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product4" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product4" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product4" class="product">
                  </figure>
              </li>
          </ul>

          <!-- Control  buttons-->
          <ul class="sliderControls">
              <li><label for="slide1">1</label></li>
              <li><label for="slide2">2</label></li>
              <li><label for="slide3">3</label></li>
              <li><label for="slide4">4</label></li>
          </ul>
      </div>

答案 1 :(得分：0)

如果我理解正确，你想要隐藏滚动条？如果是这样，你必须使用overflow-x：hidden。你没有选择。使用后你可以使用touchMove事件和transform：translate3d（x，y，z）来控制图像窗口的位置。但这将是一个巨大的挑战。 如果你想让这项工作更轻松。您可以使用iScroll库。它使用与我所说的相同的理论。

答案 2 :(得分：0)

.sliderElements { overflow-x: hidden; }

应该删除滚动效果

- 编辑

overflow-x：hidden;

删除overflow-x不会显示滚动条并显示所有图像

答案 3 :(得分：0)

overflow-x：hidden对于我的滑动显示非常重要，否则不会显示任何溢出的图像。我找到了解决方案。我已经将overflow-x：隐藏到我的身体{}中，现在有了noch滚动效果，我的幻灯片显示效果非常好。

相关问题
最新问题