自写Js+CSS轮显效果

代码简介：

自已写的JavaScript轮显切换效果，虽然还不是十分完美，但作为自己的一点小成就奉献给大家，示例里的文字可以换成图片，这样图片切换的效果就出来了。

代码内容：

View Code

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >  
< title > 自写Js + CSS轮显效果_网页代码站(www.webdm.cn) </ title >
< style type = " text/css " >
* { margin: 0 ; padding: 0 }
#wapper{ position:relative;height:280px; width:316px; overflow:hidden}
#slideshow{width:316px; height:300px; overflow:hidden; position:relative;}
#imglist{width:1264px; height: 100 % ;  float :left; padding: 0 ; margin: 0 ;position:absolute; left: 0 }
#imglist li{ width: 25 % ;height: 100 % ;  float :left}
#nextlist{position:absolute; z - index: 9 }
#nextlist li{  float :left; display:inline; height:30px; padding:10px  0 ; width:79px;}
#nextlist li.current{background:#c00}
#bg{ position:absolute; z - index: 1 ;background:#ff0;filter:alpha(opacity = 20 );opacity: 0.2 ; height:50px; width:316px}
</ style >
</ head >
< body >
< div id = " wapper " >
< div id = " slideshow " >
< ul id = " imglist " >
< li style = "  background:#f0c; " > 1 </ li >
< li style = "  background:#cf0; " > 2 </ li >
< li style = "  background:#09e; " > 3 </ li >
< li style = "  background:#efc; " > 4 </ li >
</ ul >
</ div >
< div id = " nextlist " >
< ul >
< li  class = " current " > 111 </ li >
< li > 222 </ li >
< li > 333 </ li >
< li > 444 </ li >
</ ul >
</ div >
< div id = " bg " ></ div >
</ div >
< script type = " text/javascript " >
var num  =   0 ;
function nextElement(eleObj,aa){
var obj  =  document.getElementById(eleObj);
      if  (obj.movement) {
    clearTimeout(obj.movement);
  }
     if  ( ! obj.style.bottom) {
        obj.style.bottom  =   " -50px " ;
    }
    var xpos  =  parseInt(obj.style.bottom);
       if  (xpos  ==  aa) {
         return   false ;
        }
       if  (xpos  >  aa) {
        var dist  =  Math.ceil((xpos  -  aa) / 5 );
        xpos  =  xpos  -  dist;
      }
         if  (xpos  <  aa) {
        var dist  =  Math.ceil((aa  -  xpos) / 5 );
        xpos  =  xpos  +  dist;
      }
      obj.style.bottom  =  xpos  +   " px " ;
  
  
  var repeat  =   " nextElement(' " + eleObj + " ',' " + aa + " ') " ;
  obj.movement  =  setTimeout(repeat, 30 );
}
function moveElement() {
var elem  =  document.getElementById( " slideshow " );
var nextElem  =  document.getElementById( " nextlist " );
var imgElem  =  document.getElementById( " imglist " );
var lis  =  elem.getElementsByTagName( " li " );
var nextLis  =  nextElem.getElementsByTagName( " li " );
    
      if  (imgElem.movement) {
    clearTimeout(imgElem.movement);
  }
   if  ( ! imgElem.style.left) {
    imgElem.style.left  =   " 0 " ;
  }
      var xpos  =  parseInt(imgElem.style.left);
      var naa  =  num  *   - 316 ;
       if  (xpos  ==  naa) {
             if (num == (lis.length  -   1 )  ||  num > lis.length){
                num = 0 ;
                 return   false ;
            }
             else {
                num ++ ;
                 return   false ;
            }
        }
     for (var i = 0 ;i < nextLis.length;i ++ ){
        nextLis[i].className = "" ;
        nextLis[num].className = " current " ;
    }
       if  (xpos  >  naa) {
        var dist  =  Math.ceil((xpos  -  naa) / 4 );
        xpos  =  xpos  -  dist;
      }
         if  (xpos  <  naa) {
        var dist  =  Math.ceil((naa  -  xpos) / 4 );
        xpos  =  xpos  +  dist;
      }
      imgElem.style.left  =  xpos  +   " px " ;
  
  
  var repeat  =   " moveElement() " ;
  imgElem.movement  =  setTimeout(repeat, 30 );
  
}
function checkMove(){
var elem  =  document.getElementById( " slideshow " );
var nextElem  =  document.getElementById( " nextlist " );
var imgElem  =  document.getElementById( " imglist " );
var bgElem  =  document.getElementById( " wapper " );
var lis  =  elem.getElementsByTagName( " li " );
var nextLis  =  nextElem.getElementsByTagName( " li " );
        bgElem.onmouseover = function(){
            nextElement( " nextlist " , 0 );
            nextElement( " bg " , 0 );
        }
        bgElem.onmouseout = function(){
            nextElement( " nextlist " , - 50 );
            nextElement( " bg " , - 50 );
        }
     for (var i = 0 ;i < nextLis.length;i ++ ){
        
        nextLis[i].onmouseover = function(){
            clearInterval(changebox);
            thisMove( this );
        }
        nextLis[i].onmouseout = function(){
            startMove();
        }
        lis[i].onmouseover = function(){
            clearInterval(changebox);
             // thisStop(this);
        }
        lis[i].onmouseout = function(){
            startMove();
        }
    }
    function startMove(){
        changebox  =  setInterval( " moveElement() " , 4000 );
    }
    function thisMove(obj){
         for (var i = 0 ;i < nextLis.length;i ++ ){
            nextLis[i].className = "" ;
             if (nextLis[i] == obj){
                nextLis[i].className = " current " ;
                num = i;
                setTimeout( " moveElement() " , 0 );
            }
             else {
                 nextLis[i].className = "" ;
            }
        }
    }
}
changebox  =  setInterval( " moveElement() " , 4000 );
checkMove();
</ script >
</ body >
</ html >
< br  />
< p >< a href = " http://www.webdm.cn " > 网页代码站 </ a >   -  最专业的网页代码下载网站  -  致力为中国站长提供有质量的网页代码！ </ p >
</ body >
</ html >
代码来自：http: // www.webdm.cn/webcode/6730e8a3-b4a0-456a-9469-12c390d29247.html

 

 

转载于:https://www.cnblogs.com/webdm/archive/2011/08/03/2125916.html