Question

我一直在寻找一个非常基本的代码，可以将幻灯片图像向左滑动，宽度以百分比形式显示。

我查看了http://jquery.malsup.com/cycle2/，但是当我在我的网站上加载它时，不会选择循环＆＃34;错误＆＃34;所以不再使用它了。

为什么大多数人都会制作淡入淡出的幻灯片？似乎没有多少人会进行向左或向右滑动图像的幻灯片。

我只是在一个基本的jquery代码之后，可以让我将图像向左滑动，宽度以百分比表示

我发现的大多数教程都是淡入淡出的，即使在这里，它们也大多都会消失。

不想使用任何引导程序或其他插件。

如果您有任何人知道一个简单的JavaScript代码，可以让我向左滑动图片并且宽度为百分比，请告诉我们。我可以做自己的基本造型。

Answer 1

我把它放在这里，你可以检查你是否喜欢它并获取源代码。 http://medda86.com/stackoverflow/slider/

它是一个jquery滑块，可以满足您的要求。就像滑块的骨架一样，您可以根据自己的需要设置样式并使用它。

Answer 2

许多人都在努力应对幻灯片，无限等等之间的速度，精确连接。我通过两次添加一个图像来保持简单。一个在幻灯片阵列的开头和一个末尾。因此观众不会注意到无限远已被打破。即使有人关闭JavaScript，纯CSS中的幻灯片仍在运行，而且它比JavaScript更快。

@media screen and (min-width: 768px) {
  .carousel {
    overflow: hidden;
    margin-top: 39px;
    width: 100%; /* wider than 100%, because to there is a margin on the side of the carousel after assigning position relative*/
    position: relative;
    left: 0;
    top: 0;
    z-index: 10;
  }
}

@media screen and (max-width: 767px) {
  .carousel {
    overflow: hidden;
    margin-top: 23px;
    width: 100%;
    position: relative; 
    left: 0;
    top: 0;
    z-index: 10;
  }
}

.slideshow-frame { 
  list-style: none;
  position: relative;
  height: 100%;
  width: 500%;
  float: left;
  overflow: hidden;
  margin-left: -40px;
  animation: slidespeed 24s infinite;
}

.slideshow-frame > li {
  position: relative;
  float: left;
  width: 20%; /* 100% / number of slide images */
}

.carousel img {
  display: block;
  width: 100%;
  max-width: 100%;
}

@keyframes slidespeed {
  0%    { 
    left: 0%; 
  }
  20.5% {
    left: -100%;
  }
  25%   { 
    left:-100%; 
  }
  45.5% {
    left: -200%;
  }
  50%   { 
    left:-200%; 
  }
  70.5% {
    left: -300%;
  }
  75%   { 
    left:-300%; 
  }
  95.5% {
    left: -400%;
  }
  100%  { 
    left: -400%; 
  }
}

<div class="carousel">
<ul class="slideshow-frame">

  <li>
    <img src="http://www.sibelco.com.au/wp-content/uploads/photo-gallery/Sibelco_Salt%20Ash_NSW_Day.jpg" alt="" class="slide-image" />
  </li>

  <li class="other-image">
    <img src="http://demo.accesspressthemes.com/wordpress-plugins/wp-1-slider-pro/wp-content/uploads/2016/08/slider-8.jpg" alt="" class="slide-image" />
  </li>

  <li class="other-image">
    <img src="http://dsconstructionltd.com/FM/Gardening/files/stacks-image-83418b2.jpg" alt="" class="slide-image"/>
  </li>

  <li class="other-image">
    <img src="http://www.dsconstructionltd.com/FM/Plumbing/files/stacks-image-498320d.jpg" alt="" class="slide-image"/>
  </li>

  <li class="other-image">
    <img src="http://www.sibelco.com.au/wp-content/uploads/photo-gallery/Sibelco_Salt%20Ash_NSW_Day.jpg" alt="" class="slide-image"/>
  </li>
</ul>
</div>

创建向左滑动的幻灯片？

2 个答案: