js implementiert ein Bildkarussellalbum mit Übergangsverlaufseffekt (kompatibel mit IE, ff)

js implementiert ein Bildkarussellalbum mit Übergangsverlaufseffekt (kompatibel mit IE, ff)_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:19:24

Original

1506 Leute haben es durchsucht

In diesem Artikel wird das Beispiel von js zur Implementierung eines Bildkarussellalbums mit Übergangsverlaufseffekten vorgestellt. Der spezifische Inhalt ist wie folgt

Die Idee ist sehr einfach: Verwenden Sie zwei Attribute, um das aktuelle Bild und das vorherige Bild zu speichern, und verwenden Sie zwei Timer, um die Transparenz bzw. das aktuelle Übergangsbild zu steuern.

<HTML> 
<HEAD> 
<TITLE></TITLE> 
</HEAD> 
<style> 
#cnt{width:100%;height:80%;} 
.ctrl{text-align:center;border:1px solid gray;font-size:12px;cursor:pointer;} 
</style> 
<script defer='defer'> 
<!-- 
  var curOpac = 0; 
  var filterTimer; 
  var isIE = /internet explorer/i.test(window.navigator.appName); 
   
  function MyScroll(cnt, control){ 
    this.data = []; // 存放图片路径 
    this.interval = 3000; // 过渡一次的间隔时间(过渡时间+图片显示时间) 
    this.timer; // 定时器：控制当前显示的图片 
    this.container = cnt; 
    this.curFrame = 0; 
    this.oldFrame = 0; 
    this.controls = control; // 按钮集合 
    Global = this;     // 获取对象的指针 
 
    this.run = function(){ 
      this.timer = window.setInterval("Global.showFrame()", this.interval); 
    } 
     
    // 按钮的处理程序 
    this.go = function(i){ 
      curOpac = 0; // 透明度归0 
      this.curFrame = i; // 当前要过渡的图片 
      this.stop(); // 清空计时器 
      this.showFrame(); // 当前图片过渡 
      this.run(); // 循环播放 
    } 
     
    this.stop = function(){ 
      window.clearInterval(this.timer); 
      window.clearInterval(filterTimer); 
    } 
 
    this.showFrame = function(){ 
      // 设置当前按钮样式 
      this.controls[this.oldFrame].style.backgroundColor = "white"; 
      this.controls[this.curFrame].style.backgroundColor = "gray"; 
 
      if(isIE) this.container.style.filter = "alpha(opacity=0)"; 
      else this.container.style.cssText = "-moz-opacity:0"; 
 
      this.container.innerHTML = this.data[this.curFrame]; 
      filterTimer = window.setInterval("blend()", 100); 
       
      this.oldFrame = this.curFrame; 
      this.curFrame ++; 
      if(this.curFrame == this.data.length){ 
        this.curFrame = 0; 
      }       
    } 
  } 
   // 增加透明度 
  function blend(){ 
    curOpac+=10; 
    if(isIE) Global.container.style.filter='alpha(opacity=' + curOpac + ')'; 
    else Global.container.style.cssText = "-moz-opacity:" + curOpac/100.0; 
 
    if(curOpac == 100){ 
      curOpac = 0; 
      window.clearInterval(filterTimer); 
    } 
  } 
  //开始 
   
  function startIt(){ 
    var imgArr = []; 
    // 创建4个图片对象保存图片路径 
    for(var i=0;i<4;i++){ 
      imgArr[i] = new Image(); 
      imgArr[i].src = "images/banner" + (i + 1) + ".jpg"; 
    } 
     
    var controlArr = $("mainTb").getElementsByTagName("span"); 
    for(var i=0;i<controlArr.length;i++){ 
      controlArr[i].tag = i; 
      controlArr[i].onclick = function(){ 
        myScroll.go(this.tag); 
      } 
    } 
 
    var myScroll = new MyScroll($("cnt"), controlArr); 
    myScroll.data.push("<img src='" + imgArr[0].src + "'>"); 
    myScroll.data.push("<img src='" + imgArr[1].src + "'>"); 
    myScroll.data.push("<img src='" + imgArr[2].src + "'>"); 
    myScroll.data.push("<img src='" + imgArr[3].src + "'>"); 
     
    myScroll.go(0); 
  } 
   
  window.onload = startIt; 
 
  function $(id){ return document.getElementById(id);} 
//--> 
</script> 
<BODY> 
<table width="300" height="100" id="mainTb"> 
  <tr> 
  <th rowspan="4"><div id="cnt"> </div></td> 
  <td width="15"><span class="ctrl"> 1 </span></td> 
  </tr> 
  <tr> 
  <td><span class="ctrl"> 2 </span></td> 
  </tr> 
  <tr> 
  <td><span class="ctrl"> 3 </span></td> 
  </tr> 
  <tr> 
  <td><span class="ctrl"> 4 </span></td> 
  </tr> 
</table> 
</BODY> 
</HTML>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.