js image automatisches Karussell-Code-Sharing (js image carousel)

js image automatisches Karussell-Code-Sharing (js image carousel)_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 16:49:36

Original

1528 Leute haben es durchsucht

1. Verwenden Sie die Anzeigeposition der Bildbreite, um das Bild abzuspielen: .offsetWidth, aBtn[i].index = i, setInterval(), oUl[0].style.left = , onclick()
2. Verwenden Sie ein Array, um Bilder in ein Karussell zu legen, Technologie: setInterval(). Kein onclick()

Bildkarussell 12js.html

Code kopieren Der Code lautet wie folgt:

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict .dtd">


  images slide
< style type="text/css">
  * {
   margin: 0px;
   padding: 0px;
  }
  li {
   list-style: none;
} >   Höhe: 400 Pixel;
   Box-Shadow: 0 Pixel 0 Pixel 5 Pixel #c1c1c1; {
   Position: absolut;
   links: 0px;
   oben: 0px;
   Höhe: 400px;
   Breite: 11930px;
  }
  #slide ul li {
   width: 800px;
   height: 400px;
   overflow: versteckt;
   float: left;
  }
  #slide .ico {
   width: 800px;
   height: 20px;
   Überlauf: versteckt;
   text-align: center;
   position: absolut;
   links: 0px;
   unten: 10px;
   z-index: 1;
  } ;
   margin: 0px 5px;
  }
  #slide .ico .active {
   background: url(out1.png) no-repeat 0px 0px;
  }
  #btnLeft {
   Breite: 60px;
   Höhe: 400px;
   links: 0px;
   oben: 0px;
   Hintergrund: url() keine Wiederholung 0px 0px;
   Position: absolut;
   z-index: 2;
  }
  #btnLeft :hover {
  ;
   Höhe: 400px;
   rechts: 0px;
   oben: 0px;
   Hintergrund: url() no-repeat 0px 0px;
   Position: absolut;
   z-index: 2;
  } ;script type="text/javascript">
  window.onload = function() {
   var oIco = document.getElementById("ico");
   var aBtn = oIco.getElementsByTagName("a" );
   var oSlide = document.getElementById("slide");
   var oUl = oSlide.getElementsByTagName("ul");
   var aLi = oUl[0].getElementsByTagName("li");
   var oBtnLeft = document.getElementById("btnLeft");
   var oBtnRight = document.getElementById("btnRight");

   var baseWidth = aLi[0].offsetWidth;
   / /alert(baseWidth);
   oUl[0].style.width = baseWidth * aLi.length "px";
   var iNow = 0;
   for(var i=0;i    aBtn[i].index = i;
    aBtn[i].onclick = function() {
     //alert(this.index);
     //alert(oUl [0].style.left);
     move(this.index);
     //aIco[this.index].className = "active";
    }
   }
   oBtnLeft. onclick = function() {
    iNow ;
    //document.title = iNow;
    move(iNow);
   }
   oBtnRight.onclick = function() {
    iNow - -;
    document.title = iNow;
    move(iNow);
   }

   var curIndex = 0;
   var timeInterval = 1000;
   setInterval(change,timeInterval);
   function change() {
    if(curIndex == aBtn.length) {
     curIndex =0;
    } else {
     move(curIndex);
     curIndex = 1;
    }

}

< ;/li>

< img src="6.jpg" alt="" />

   < /a>

图片自动播放.html

复制代码

代码如下:

Bilder