首頁 > web前端 > js教程 > 主體

js實現無縫滾動特效_javascript技巧

WBOY
發布: 2016-05-16 15:24:30
原創
1129 人瀏覽過

本文實例為大家介紹了js實現無縫滾動特效需要做到的功能,以及關鍵性js程式碼,分享給大家供大家參考,具體內容如下

運作效果圖:

結合下學了的知識,做個模擬的綜合性擴展練習~~  大致功能如下:

  • 1、點開html後,圖片自動移動展示
  • 2、點擊左右方向,可以改變 圖片移動的方向(改變left的值,正負)
  • 3、滑鼠移入移出圖片後,圖片暫停移動(setInterval,clearInterval)
  • 4、滑鼠移到圖片上,高亮(a:hover)
  • 5.點擊小圖, 下面的大圖會改變
  • 6、文字區域隨著圖片的變化而改變(未成功,有待提升)

 具體代碼:

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

}
登入後複製

最後文字的替換效果,本想用圖片的方式,讓文字框對應的數字跟著變~~ 結果未能成功,不知原因,這方面還需待提高,希望大家能提供一些好的建議,不過js實現無縫滾動還是正常實現了,希望對大家也能有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!