Heim  >  Artikel  >  Web-Frontend  >  js, um nahtlose Bildlaufeffekte zu erzielen_Javascript-Fähigkeiten

js, um nahtlose Bildlaufeffekte zu erzielen_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:24:301133Durchsuche

Das Beispiel in diesem Artikel stellt die Funktionen vor, die js benötigt, um nahtlose Scrolleffekte zu erzielen, sowie den wichtigsten js-Code und teilt ihn als Referenz mit Ihnen. Der spezifische Inhalt ist wie folgt:

Operationsrendering:

Erstellen Sie in Kombination mit den unten erlernten Kenntnissen eine simulierte umfassende erweiterte Übung~~ Die allgemeine Funktion ist wie folgt:

  • 1. Nach dem Klicken auf den HTML-Code wird das Bild automatisch verschoben und angezeigt
  • 2. Klicken Sie auf die linke und rechte Richtung, um die Richtung der Bildbewegung zu ändern (ändern Sie den Wert von links, positiv oder negativ)
  • 3. Nachdem sich die Maus in das Bild hinein und aus ihm heraus bewegt, wird das Bild angehalten (setInterval, clearInterval)
  • 4. Bewegen Sie die Maus über das Bild und markieren Sie es (a:hover)
  • 5. Klicken Sie auf das kleine Bild, das große Bild unten ändert sich
  • 6. Der Textbereich ändert sich, wenn sich das Bild ändert (erfolglos, muss verbessert werden)

Spezifischer Code:

window.onload = function(){

  //声明部分( 现在的习惯是要写什么声明什么, 一起写容易搞忘了。。也不知道好不好这样)

  var oDiv = document.getElementById('box');

  var oUl = oDiv.getElementsByTagName('ul');

  var oLi = oUl.getElementsByTagName('li');

  var speed = 2;

  var timer = null;

   

  //让ul的内容增一倍,从而实现无缝滚动

  oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

  oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';

  //move函数

  function move(){
    oUl.style.left = oUl.offsetLeft + speed + 'px';
    //控制左
    if(oUl.offsetLeft < -oUl.offsetWidth/2){
    oUl.style.left = 0;
    }

    //控制右
    if(oUl.offsetLeft > 0){
    oUl.style.left = -oUl.offsetWidth/2 + 'px';
    }

  }

    //图标点击~ 控制移动方向

    var oLeft = document.getElementById('jt_left');
    var oRight= document.getElementById('jt_right');

    oLeft.onclick = function(){
    speed = -2;
    }

    oRight.onclick = function(){
    speed = 2;
    }

    //鼠标移入移出效果

    oDiv.onmouseover = function(){
      clearInterval(timer);
    }

    oDiv.onmouseout = function(){
      timer = setInterval(move,20);
    }
    timer = setInterval(move,20); 

    //点击获取大图

    

    var aA = oDiv.getElementsByTagName('a');
    for(var i=0;i<aA.length;i++){
      aA[i].onclick = function(){
        showPic(this);
        return false;
      }
    }
    
    function showPic(whichpic){
      var source = whichpic.href;
      var placeholder = document.getElementById('placeholder');
      placeholder.src = source;
    }

}

Für den endgültigen Textersetzungseffekt wollte ich die Zahlen, die dem Textfeld entsprechen, ändern~~ Dieser Aspekt muss noch verbessert werden Geben Sie einige gute Vorschläge. Ich hoffe jedoch, dass das nahtlose Scrollen in js für alle hilfreich sein kann.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn