使用 play/pause 按钮平滑滚动滑块

Question

我正在做一个项目，我需要一个带有播放暂停按钮的可滚动滑块，例如 www.gap.com。我从 W3C 获得了下面的代码，但不确定为什么多个图像没有完全显示。如果我更改 CSS 代码中的宽度值，则只有第一个图像部分会滚动，但它会完全忽略第二个图像。请任何人帮助我。

var speed=20        // speed of scroller
var step=3          // smoothness of movement
var StartActionText= "Scroll"  // Text for start link
var StopActionText = "Pause"   // Text for stop link

var x, scroll, divW, sText=""

function onclickIE(idAttr,handler,call){
  if ((document.all)&&(document.getElementById)){idAttr[handler]="Javascript:"+call}
}

function addLink(id,call,txt){
  var e=document.createElement('a')
  e.setAttribute('href',call)
  var linktext=document.createTextNode(txt)
  e.appendChild(linktext)
  document.getElementById(id).appendChild(e)
}

function getElementStyle() {
    var elem = document.getElementById('scroller');
    if (elem.currentStyle) {
        return elem.currentStyle.overflow;
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, '');
        return compStyle.getPropertyValue("overflow");
    }
    return "";
}

function addControls(){

// test for CSS support first 
// test for the overlow property value set in style element or external file

if (getElementStyle()=="hidden") {
  var f=document.createElement('div');
  f.setAttribute('id','controls');
  document.getElementById('scroller').parentNode.appendChild(f);
  addLink('controls','Javascript:clickAction(0)',StopActionText);
  onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction(0)');
  document.getElementById('controls').style.display='block';
  }
}

function stopScroller(){clearTimeout(scroll)}

function setAction(callvalue,txt){
  var c=document.getElementById('controls')
  c.childNodes[0].setAttribute('href','Javascript:clickAction('+callvalue+')')
  onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction('+callvalue+')')
  c.childNodes[0].firstChild.nodeValue=txt
}

function clickAction(no){
  switch(no) {
    case 0:
      stopScroller();
      setAction(1,StartActionText);
      break;
    case 1:
      startScroller();
      setAction(0,StopActionText);
  }
}



function startScroller(){
  document.getElementById('tag').style.whiteSpace='nowrap'
  var p=document.createElement('p')
  p.id='testP'
  p.style.fontSize='25%' //fix for mozilla. multiply by 4 before using
  x-=step
  if (document.getElementById('tag').className) p.className=document.getElementById('tag').className
  p.appendChild(document.createTextNode(sText))
  document.body.appendChild(p)
  pw=p.offsetWidth
  document.body.removeChild(p)
  if (x<(pw*4)*-1){x=divW}
  document.getElementById('tag').style.left=x+'px'
  scroll=setTimeout('startScroller()',speed)
}

function initScroller(){
  if (document.getElementById && document.createElement && document.body.appendChild) {
    addControls();
    divW=document.getElementById('scroller').offsetWidth;
    x=divW;
    document.getElementById('tag').style.position='relative';
    document.getElementById('tag').style.left=divW+'px';
    var ss=document.getElementById('tag').childNodes;
    for (i=0;i<ss.length;i++) {sText+=ss[i].nodeValue+" "};
    scroll=setTimeout('startScroller()',speed);
  }
}


function addLoadEvent(func) {
  if (!document.getElementById | !document.getElementsByTagName) return
  var oldonload = window.onload
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload()
      func()
    }
  }
}

addLoadEvent(initScroller)

body {font:1em verdana,sans-serif; color:#000; margin:0}

/* position:relative and overflow:hidden are required */
#scroller { position:relative; overflow:hidden; width:30em; border:1px solid #008080; }

/* add formatting for the scrolling text */
#tag { margin:2px 0; }

/* #testP must also contain all text-sizing properties of #tag  */
#testP { visibility:hidden; position:absolute; white-space:nowrap; } 

/* used as a page top marker and to limit width */
#top { width:350px; margin:auto; }

<div id="scroller">
    <div id="tag">
        <img src="https://picsum.photos/1500/600/?image=1"/>
        <img src="https://picsum.photos/1500/600/?image=2"/>
    </div>
</div>

Answer 1

我对给定的 JS 有点迷茫，想知道对于这个相对简单的任务是否有必要。

这里有一个使用 HTML 和 CSS 进行连续滚动的方法，并且只使用 JS 来处理 pause/play 部分。

因为您希望在图像序列回到开头时不间断地连续滚动或跳转，所以您需要两个副本。标签元素向左滚动其宽度的一半，这意味着图像集会覆盖自己，从而产生平滑的效果。

按钮的 JS 使用运行值并切换它。

.playpause {
  top: 10%;
  left: 10%;
  position: absolute;
  z-index: 1;
}

#scroller {
  width: min(30em, 100vw);
  height: min(20em, 100vh);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

#scroller #tag {
  height: 100%;
  animation: scroll 10s linear infinite;
  animation-fill-mode: forwards;
  display: inline-block;
  font-size: 0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

img {
  height: 100%;
  width: auto;
  display: inline-block;
}

<div id="scroller">
  <button class="playpause" onclick="document.querySelector('#tag').style.animationPlayState = (document.querySelector('#tag').style.animationPlayState != 'paused') ? 'paused' : 'running';">PLAY/PAUSE</button>
  <div id="tag">
    <img src="https://picsum.photos/1500/600/?image=1" />
    <img src="https://picsum.photos/1500/600/?image=2" />
    <!-- second copy of all the imaages -->
    <img src="https://picsum.photos/1500/600/?image=1" />
    <img src="https://picsum.photos/1500/600/?image=2" />
  </div>
</div>

观察：问题中链接到的网站（gap）在图片中途有点不愉快'jump'所以我认为他们必须使用不同的方法来实现连续滚动。

使用 play/pause 按钮平滑滚动滑块

Smooth scrolling slider with play/pause button

html

javascript

css

slider

horizontal-scrolling