滑块中的img溢出img和转换（HTML，CSS，JS）

时间：2017-07-21 07:23:10

标签： javascript html css navigation

我正在使用导航按钮创建图像滑块。但是当我第一次运行页面时，所有图像都会像连续显示一样。我尝试“溢出：隐藏”，但它不起作用。导航功能，我用JS代码。我的页面还有一个功能，我将图像映射到图像中。这就是代码HTML有3个img_ID id的原因（对于那些对此感到好奇的人）：D

其次，当我点击导航按钮时，图像无法轻柔移动（我的意思是，它看起来很难看。当我点击导航按钮时，我想要像这样平滑的东西：https://codeconvey.com/Tutorials/cssSlider/）< / p>

我尝试eveything，因为我知道，但它仍然无法正常工作:( 谁能在这里找出我的问题？我非常感谢你们的支持。对不起，我的英语不好 ：（ 这是我的代码：

var slideIndex = 1;
        showSlides(slideIndex);

        function nextFlyer(n) {
            showSlides(slideIndex += n);
        }

        function currentFlyer(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("imgFlyers");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "block";
            dots[slideIndex-1].className += " active";
        }
/*-------- ADJUSTING IMG OF FLYERS --------*/
.section_layer {
    width: 100%;
}

#img_ID {
    width: 100%;
    height: 50%;
    float: left;
    display: inline-block;
    /*background-repeat: no-repeat;*/
    z-index: 1;
    /*display: block;
    margin: 0 auto;*/
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

.img_content {
    display: block;
    margin: 0 auto;
}

/*---------- NAVIGATION BUTTON ----------*/
.flyer-navigation-button {
    height: 100px;
    width: 100px;
    margin: 0;
    padding: 20px;
    background: 0;
    border: 0;
    cursor: pointer;
}

.flyer-navigation-button:hover {
    opacity: .4;
}

.flyer-navigation-button svg circle {
    fill: #0073c5;
}

.flyer-navigation-button svg polygon {
    fill: #fff;
}

.border_test {
    border: 1px solid black;
}

.navigation_container {
    position: relative;
}

button:focus {
    outline: 0
}

.pages_number {
    position: absolute;
    background-color: beige;

}

.pages_number span {
    font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #0073c5;
    font-size: 20px;
}

.zoom_slider {
    width: 30%;
    float: left;
}

.pages_number {
    float: left;
    width: 40%;
}

.download_button {
    float: right;
    width: 20%
}

.dot {
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot:hover {
    background-color: #717171;
}

/*------- FOLDER IMAGES INTO 1 SLIDE ---------*/
#image_slider{

    position: relative;
    height: auto;
    list-style: none;
    overflow: hidden;
    float: left;
    /*Chrom default padding for ul is 40px */
    padding:0px;
    margin:0px;
}

#image_slider li{
    position: relative;
    float: left;
}

#pager li{
    padding: 0px;
    margin:5px;
    width:20px;
    height:20px;
    border:1px solid white;
    color:white;
    list-style: none;
    opacity: 0.6;
    float:left;
    border-radius: 3px;
    cursor: pointer;
}
<!-- begin snippet: js hide: false console: true babel: false -->

2 个答案:

答案 0 :(得分：0)

您使用#image_slider此ID作为样式，但没有在HTMl中使用。 CSS中还有其他样式，但HTML中没有。

＆＃13;
＆＃13; 
var slideIndex = 1;
        showSlides(slideIndex);

        function nextFlyer(n) {
            showSlides(slideIndex += n);
        }

        function currentFlyer(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("imgFlyers");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slides[slideIndex-1].style.display = "block";
        }
＆＃13; 
/*-------- ADJUSTING IMG OF FLYERS --------*/
        html, body{
            height: 100%;
            margin:0;
        }
        .section_layer, .flyer_content, .image-holder {
            width: 100%;
            height: 100%;
        }

        .imgFlyers {
            width: 100%;
            height: 100%;
            float: left;
            display: inline-block;
            z-index: 1;
            -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
            -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
            -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
            transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
        }

        /*---------- NAVIGATION BUTTON ----------*/
        .flyer-navigation-button {
            height: 100px;
            width: 100px;
            margin: 0;
            padding: 20px;
            background: 0;
            border: 0;
            cursor: pointer;
        }

            .flyer-navigation-button:hover {
                opacity: .4;
            }

            .flyer-navigation-button svg circle {
                fill: #0073c5;
            }

            .flyer-navigation-button svg polygon {
                fill: #fff;
            }

        /*.navigation_container {
            position: relative;
        }*/

        .flyer-navigation-button{
            position: absolute;
            top: calc(50% - 30px); 
        }
            .flyer-navigation-button.left {
                left: 0;
            }
            .flyer-navigation-button.right {
                right: 0;
            }

        button:focus {
            outline: 0;
        }

        .pages_number span {
            font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
            color: #0073c5;
            font-size: 20px;
        }
＆＃13; 
    <div class="flyer_content">

        <div class="section_layer">
            <!-- BEGIN THE NAVIGATION CONTENT -->
            <div class="navigation_container">
                <button class="flyer-navigation-button left" id="flyer_navigation_backward"
                        onclick="nextFlyer(-1)">
                    <svg viewBox="0 0 58 58" focusable="false">
                        <circle cx="29" cy="29" r="28.6"></circle>
                        <polygon points="14.9,29.4 31.9,13.1 37.1,17.4 24,29.4 37.1,41.7
                     32.7,45.9"></polygon>
                    </svg>
                </button>
                <button class="flyer-navigation-button right" id="flyer_navigation_forward"
                        onclick="nextFlyer(1)">
                    <svg viewBox="0 0 58 58" focusable="false">
                        <circle cx="29" cy="29" r="28.6"></circle>
                        <polygon points="43.1,29.4 26.1,13.1 20.9,17.4 34,29.4 20.9,41.7
                     25.3,45.9"></polygon>
                    </svg>
                </button>
            </div>
            <!-- END THE NAVIGATION CONTENT -->
            <div class="image-holder">
                <img class="imgFlyers" style="display: inline-block;" src="https://img07.rl0.ru/c4dea1147b4a02e2ff38a9fdbd8bed7a/c2560x1600/img.mota.ru/upload/wallpapers/2009/07/16/12/02/14317/ny_349-2560x1600.jpg" usemap="#flyermap" />
                <img class="imgFlyers" style="display: none" src="http://weconnectedproductionsllc.com/wp-content/uploads/2015/02/Snowing-at-night-in-Park-City-UT.jpg" usemap="#flyermap" />
                <img class="imgFlyers" style="display: none" src="http://3.bp.blogspot.com/-Gt8kdm8xwaA/VfMLfJT6DbI/AAAAAAAACJ8/ukXJoWeYFVk/s1600/DSC00392B.jpg" />
            </div>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个...... 

var slideIndex = 1;
showSlides(slideIndex);

function nextFlyer(n) {
  showSlides(slideIndex += n);
};

function showSlides(n) {
  var i;
  var op = 0.1;
  var slides = document.getElementsByClassName("imgFlyers");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.opacity = 0;
  setTimeout(function() {
    slides[slideIndex - 1].style.opacity = 1;
  }, 100);

  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}
.section_layer {
  width: 100%;
}

#img_ID {
  width: 100%;
  height: 50%;
  float: left;
  display: inline-block;
  /*background-repeat: no-repeat;*/
  z-index: 1;
  /*display: block;
        margin: 0 auto;*/
  -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

.img_content {
  display: block;
  margin: 0 auto;
}


/*---------- NAVIGATION BUTTON ----------*/

.flyer-navigation-button {
  height: 100px;
  width: 100px;
  margin: 0;
  padding: 20px;
  background: 0;
  border: 0;
  cursor: pointer;
  z-index: 1000;
}

.flyer-navigation-button:hover {
  opacity: .6;
}

.flyer-navigation-button svg circle {
  fill: #0073c5;
}

.flyer-navigation-button svg polygon {
  fill: #fff;
}

.border_test {
  border: 1px solid black;
}

.navigation_container {
  position: relative;
}

button:focus {
  outline: 0
}

.pages_number {
  position: absolute;
  background-color: beige;
}

.pages_number span {
  font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #0073c5;
  font-size: 20px;
}

.zoom_slider {
  width: 30%;
  float: left;
}

.pages_number {
  float: left;
  width: 40%;
}

.download_button {
  float: right;
  width: 20%
}

.dot {
  cursor: pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot:hover {
  background-color: #717171;
}


/*------- FOLDER IMAGES INTO 1 SLIDE ---------*/

#image_slider {
  position: relative;
  height: auto;
  list-style: none;
  overflow: hidden;
  float: left;
  /*Chrom default padding for ul is 40px */
  padding: 0px;
  margin: 0px;
}

#image_slider li {
  position: relative;
  float: left;
}

#pager li {
  padding: 0px;
  margin: 5px;
  width: 20px;
  height: 20px;
  border: 1px solid white;
  color: white;
  list-style: none;
  opacity: 0.6;
  float: left;
  border-radius: 3px;
  cursor: pointer;
}

.imgFlyers {
  -webkit-transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

ul {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}
<div id="flyer_view_tab">
  <div class="navigation-bar">

    <a id="pdf_button" target="_blank" href="#">Download</a>
  </div>
  <div class="flyer_content">

    <div class="section_layer">
      <div class="navigation_container">
        <button class="flyer-navigation-button" is="w-navigation-button" id="flyer_navigation_backward" style="left: 0px;position: absolute;top: 0px;" onclick="nextFlyer(-1)">
                        <svg viewBox="0 0 58 58" focusable="false">
                            <circle cx="29" cy="29" r="28.6"></circle>
                            <polygon points="14.9,29.4 31.9,13.1 37.1,17.4 24,29.4 37.1,41.7
                         32.7,45.9"></polygon>
                        </svg>
                    </button>
        <button class="flyer-navigation-button" is="w-navigation-button" id="flyer_navigation_forward" style="right: 0px; position: absolute; top: 0px; float: right;" onclick="nextFlyer(1)">
                        <svg viewBox="0 0 58 58" focusable="false">
                            <circle cx="29" cy="29" r="28.6"></circle>
                            <polygon points="43.1,29.4 26.1,13.1 20.9,17.4 34,29.4 20.9,41.7
                         25.3,45.9"></polygon>
                        </svg>
                    </button>
      </div>
      <div class="image-holder">
        <ul>
          <li class="imgFlyers dot">
            <img src="https://static.pexels.com/photos/33537/cat-animal-cat-portrait-mackerel.jpg" height="250" width="510" />
          </li>
          <li class="imgFlyers dot">
            <img src="https://s-media-cache-ak0.pinimg.com/736x/0e/7f/7b/0e7f7b3f029a82e8e797ab6d3525ee5f--spring-animals-wild-animals.jpg" height="250" width="510" />
          </li>
          <li class="imgFlyers dot">
            <img src="https://newevolutiondesigns.com/images/freebies/animals-background-preview-3.jpg" height="250" width="510" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题