javascript - slider 中 img 的溢出 img 和过渡(HTML、CSS、JS)

标签 javascript html css navigation

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

其次，当我点击导航按钮时，图像不能轻柔地移动(我的意思是，它看起来很难看。我想要当我点击导航按钮时像这样平滑的东西:https://codeconvey.com/Tutorials/cssSlider/)

我尽我所知尝试了一切，但它仍然不起作用 :( 这里有人能解决我的问题吗？非常感谢您的支持。对不起，我的英语不好 :( 这是我的代码:

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 -->

最佳答案

试试这个...

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>

关于javascript - slider 中 img 的溢出 img 和过渡(HTML、CSS、JS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45231493/

上一篇：html - 如何使用 vw 单位在 css 中创建响应圈？

下一篇：javascript - 如何在 Highcharts 中为矩形提供框阴影？

相关文章：

jquery - 使用列 View ext 时是否可以设置 fancyTree 的高度

jquery - 设置文本可点击的问题

css - Bootstrap container-fluid 不是屏幕的整个宽度

javascript - 带列的可折叠列表？

Javascript 动画播放按钮

javascript - 将数据从 jQuery 发送到 AngularJS 的 Controller

javascript - 下载当前的 html 文件

javascript - 使用 getElementsByClassName 获取直接子元素

javascript - postMessage不发送数据

javascript - 背景位置 : fixed

©2024 IT工具网  联系我们