如何根据屏幕大小调整横幅

时间：2018-02-22 14:06:59

标签： javascript html css

我创建了一个移动横幅，我需要根据屏幕尺寸调整尺寸。我在我的html中添加了一些内联规则以强制大小，因为如果没有内联代码，图像的大小就会增加到三倍。但现在我认为我的内联代码可以防止图像在越来越大的设备上自动调整。

谢谢。

＆＃13;
＆＃13; 
function Sliders(o) {
  "use strict";
  var time = o.time || 500,
      autoTime = o.autoTime || 5000,
      selector = o.selector,
      width_height = o.width_height || 100 / 70,
      sliders = document.querySelectorAll(selector),
      i;
  function css(elm, prop, val) {
    elm.style[prop] = val;
    prop = prop[0].toUpperCase() + prop.slice(1);
    elm.style["webkit" + prop] = elm.style["moz" + prop] =
      elm.style["ms" + prop] = elm.style["o" + prop] = val;
  }
  function anonimFunc(slider) {
    var buttonRight = slider.children[2],
        buttonLeft = slider.children[1],
        ul = slider.children[0],
        li = ul.children,
        activeIndex = 0,
        isAnimate = false,
        i,
        s;
    ul.style.paddingTop = (100 / width_height) + "%";
    for (i = 0; i < li.length; i += 1) {
      css(li[i], "animationDuration", time + "ms");
    }
    li[activeIndex].classList.add("active");
    function right() {
      if (isAnimate) {return; }
      clearTimeout(s);
      isAnimate = true;
      var nextIndex = (activeIndex < li.length - 20) ? (activeIndex + 20) : (0);
      li[nextIndex].classList.add("next");
      li[activeIndex].classList.add("right");
      li[nextIndex].classList.add("active");
      setTimeout(function () {
        li[activeIndex].classList.remove("active");
        li[activeIndex].classList.remove("right");
        li[nextIndex].classList.remove("next");
        li[nextIndex].classList.add("active");
        activeIndex = nextIndex;
        isAnimate = false;
        s = setTimeout(right, autoTime);
      }, time);
    }
    function left() {
      if (isAnimate) {return; }
      clearTimeout(s);
      isAnimate = true;
      var nextIndex = (activeIndex > 0) ? (activeIndex - 1) : (li.length - 1);
      li[nextIndex].classList.add("previous");
      li[activeIndex].classList.add("left");
      li[nextIndex].classList.add("active");
      setTimeout(function () {
        li[activeIndex].classList.remove("active");
        li[activeIndex].classList.remove("left");
        li[nextIndex].classList.remove("previous");
        li[nextIndex].classList.add("active");
        activeIndex = nextIndex;
        isAnimate = false;
        s = setTimeout(left, autoTime);
      }, time);
    }
    buttonLeft.addEventListener("click", right);
    buttonRight.addEventListener("click", left);
    s = setTimeout(left, autoTime);
  }
  for (i = 0; i < sliders.length; i += 1) {
    anonimFunc(sliders[i]);
  }
}

var sliders = new Sliders({
  selector: ".slider",
  time: 1100,
  autoTime: 3000,
  width_height: 700 / 300
});
＆＃13; 
@keyframes slider-key-next {
  0% {right: 100%; }
  100% {right: 0; }
}
@keyframes slider-key-right {
  0% {right: 0; }
  100% {right: -100%; }
}
@keyframes slider-key-previous {
  0% {right: -100%; }
  100% {right: 0; }
}
@keyframes slider-key-left {
  0% {right: 0; }
  100% {right: 100%; }
}
.slider {
  overflow: hidden;
  position: relative;
}
.slider > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  width: 100%;
  overflow: hidden;
}
.slider > ul > li {
  position: absolute;
  right: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.slider > ul > li.active {visibility: visible; right: 0; }
.slider > ul > li.right {animation-name: slider-key-right; }
.slider > ul > li.next {animation-name: slider-key-next; }
.slider > ul > li.left {animation-name: slider-key-left; }
.slider > ul > li.previous {animation-name: slider-key-previous; }

.slider {
  max-width: 700px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.slider > button {
  transition: 0.3s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0px;
  height: 0px;
  background-color: #FAFAFA;
  opacity: 0.5;
  border: 0;
  outline: none;
  padding: 0;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}
.slider > button:hover {
  opacity: 1;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.slider > button:nth-child(2) {
  right: 10px;
}
.slider > button:nth-child(3) {
  left: 10px;
}
.slider > ul > li > img {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.slider > ul > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
}
.slider > ul > li h1,
.slider > ul > li p {
  position: relative;
  padding: 0 15%;
  color: #fff;
  font-family: sans-serif;
}
＆＃13; 
<div class="slider">
  <ul>
    <li><a href="#"><img height="225px" width="625px" src="//placehold.it/625x225"></a></li>
    <li><a href="#"><img height="225px" width="625px" src="//placehold.it/625x225"></a></li>
    <li><a href="#"><img height="200px" width="600px" src="//placehold.it/600x200"></a></li>

  </ul>

  <button></button>
  <button></button>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

希望这适合你。

＆＃13;
＆＃13; 
function Sliders(o) {
  "use strict";
  var time = o.time || 500,
      autoTime = o.autoTime || 5000,
      selector = o.selector,
      width_height = o.width_height || 100 / 70,
      sliders = document.querySelectorAll(selector),
      i;
  function css(elm, prop, val) {
    elm.style[prop] = val;
    prop = prop[0].toUpperCase() + prop.slice(1);
    elm.style["webkit" + prop] = elm.style["moz" + prop] =
      elm.style["ms" + prop] = elm.style["o" + prop] = val;
  }
  function anonimFunc(slider) {
    var buttonRight = slider.children[2],
        buttonLeft = slider.children[1],
        ul = slider.children[0],
        li = ul.children,
        activeIndex = 0,
        isAnimate = false,
        i,
        s;
    ul.style.paddingTop = (100 / width_height) + "%";
    for (i = 0; i < li.length; i += 1) {
      css(li[i], "animationDuration", time + "ms");
    }
    li[activeIndex].classList.add("active");
    function right() {
      if (isAnimate) {return; }
      clearTimeout(s);
      isAnimate = true;
      var nextIndex = (activeIndex < li.length - 20) ? (activeIndex + 20) : (0);
      li[nextIndex].classList.add("next");
      li[activeIndex].classList.add("right");
      li[nextIndex].classList.add("active");
      setTimeout(function () {
        li[activeIndex].classList.remove("active");
        li[activeIndex].classList.remove("right");
        li[nextIndex].classList.remove("next");
        li[nextIndex].classList.add("active");
        activeIndex = nextIndex;
        isAnimate = false;
        s = setTimeout(right, autoTime);
      }, time);
    }
    function left() {
      if (isAnimate) {return; }
      clearTimeout(s);
      isAnimate = true;
      var nextIndex = (activeIndex > 0) ? (activeIndex - 1) : (li.length - 1);
      li[nextIndex].classList.add("previous");
      li[activeIndex].classList.add("left");
      li[nextIndex].classList.add("active");
      setTimeout(function () {
        li[activeIndex].classList.remove("active");
        li[activeIndex].classList.remove("left");
        li[nextIndex].classList.remove("previous");
        li[nextIndex].classList.add("active");
        activeIndex = nextIndex;
        isAnimate = false;
        s = setTimeout(left, autoTime);
      }, time);
    }
    buttonLeft.addEventListener("click", right);
    buttonRight.addEventListener("click", left);
    s = setTimeout(left, autoTime);
  }
  for (i = 0; i < sliders.length; i += 1) {
    anonimFunc(sliders[i]);
  }
}

var sliders = new Sliders({
  selector: ".slider",
  time: 1100,
  autoTime: 3000,
  width_height: 700 / 300
});
＆＃13; 
@keyframes slider-key-next {
  0% {right: 100%; }
  100% {right: 0; }
}
@keyframes slider-key-right {
  0% {right: 0; }
  100% {right: -100%; }
}
@keyframes slider-key-previous {
  0% {right: -100%; }
  100% {right: 0; }
}
@keyframes slider-key-left {
  0% {right: 0; }
  100% {right: 100%; }
}
.slider {
  overflow: hidden;
  position: relative;
}
.slider > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  width: 100%;
  overflow: hidden;
}
.slider > ul > li {
  position: absolute;
  right: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.slider > ul > li.active {visibility: visible; right: 0; }
.slider > ul > li.right {animation-name: slider-key-right; }
.slider > ul > li.next {animation-name: slider-key-next; }
.slider > ul > li.left {animation-name: slider-key-left; }
.slider > ul > li.previous {animation-name: slider-key-previous; }

.slider {
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
  

.slider a img{
  width:100vw;
  height: 100vh;
}
.slider > button {
  transition: 0.3s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0px;
  height: 0px;
  background-color: #FAFAFA;
  opacity: 0.5;
  border: 0;
  outline: none;
  padding: 0;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}
.slider > button:hover {
  opacity: 1;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.slider > button:nth-child(2) {
  right: 10px;
}
.slider > button:nth-child(3) {
  left: 10px;
}
.slider > ul > li > img {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.slider > ul > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
}
.slider > ul > li h1,
.slider > ul > li p {
  position: relative;
  padding: 0 15%;
  color: #fff;
  font-family: sans-serif;
}
＆＃13; 
<div class="slider">
  <ul>
    <li><a href="#"><img src="//placehold.it/625x225"></a></li>
    <li><a href="#"><img src="//placehold.it/625x225"></a></li>
    <li><a href="#"><img src="//placehold.it/600x200"></a></li>

  </ul>

  <button></button>
  <button></button>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题