轮播图片，自动切换

JS：常见多张图片切换、图片轮播、自动切换效果代码

  (2017-02-17 15:57:01)

 

效果如图所示：

设计思路：

1、设计好图片轮播HTML代码，以及CSS定位，CSS中着重运用好position属性，relative和absolute；

   CSS代码如下：

<style type="text/css">
*{margin:0; padding:0;}
ul{list-style-type:none;}
body{ color:#333333; font:12px/1.6em Arial, Helvetica, sans-serif;}
#picfocus{width:345px; height:235px; border:1px solid #ccc; margin:5px;}
#piclist{position: relative; float:left; width:240px; height:225px; overflow:hidden; margin:5px 0px 0px 9px; display:inline;}
#pic{position:absolute;}
#pic li{overflow:hidden;width:240px; height:225px;}
#pic img{ width:240px; height:225px;}
#pictxtbg{position:absolute; bottom:0px; left:0px; background: none repeat scroll 0 0 #000000; opacity:0.5; width:240px; height:35px; filter:alpha(opacity=50);}
#pictxt{ position:absolute; bottom:8px; left:8px; color:#fff;}
#pictxt .normal{display:none;}
#pictxt .current{ display:block;}
#pic{ overflow:hidden;}
#picbtn{float:right; display:inline; margin:2px 9px 0px 0px;}
#picbtn li{ cursor:pointer; height:57px; opacity:0.5; filter:alpha(opacity=50);}
#picbtn img{ width:75px; height:45px; margin:7px 0px 0px 11px;}
#picbtn .current{ opacity:1; filter:alpha(opacity=100);}
</style>

2、JS代码设计思路：

  （1）当鼠标移动到小图片按钮上时，促发onmouseover函数，调整大图片显示的当前位置，显示当前对应的大图片，以及改变当前显示的小图片按钮及图片标题样式。

  （2）编写移动相应的大图片到当前位置的函数，movePic(pic,final_x,final_y,interval)；

       编写初始化小图片按钮的样式及标题样式，classNormal(picbtn,pictxt)

       编写显示当前图片的样式及标题样式，classCurrent(picbtn,pictxt,n)

  （3）当鼠标移动到小图片按钮时，调用以上三个函数。

  （4）自动切换图片，编写函数autoChange()，利用setInterval('autoChange()',interval)函数自动切换图片。

  相关js代码为：

<script type="text/javascript">
  //加载window.onload
   function addEventLoad(func){
    var oldonload = window.onload;
    if(typeof(window.onload) != 'funciton'){
     window.onload = func;
    }
    else {
     window.onload = function(){
      oldonload();
      func();
     }
    }
   }
  //初始化小图片及图片标题样式
  function classNormal(picbtn,pictxt){
   var picbtns = document.getElementById(picbtn).getElementsByTagName("li");
   var pictxts = document.getElementById(pictxt).getElementsByTagName("li");
   for(var i = 0; i < picbtns.length; i++){
    picbtns[i].className = "normal";
    pictxts[i].className = "normal";
   } 
  }
  //当前显示的小图片及图片标题样式
  function classCurrent(picbtn,pictxt,n){
   var picbtns = document.getElementById(picbtn).getElementsByTagNam("li");
   var pictxts = document.getElementById(pictxt).getElementsByTagName("li");
   picbtns[n].className = "current";
   pictxts[n].className = "current";
  }
  //移动图片
  function movePic(pic,final_x,final_y,interval){
   var elem = document.getElementBy(pic);
   var xpos = parseInt(elem.style.left);
   var ypos = parseInt(elem.style.top);
   if(elem.movement){
    clearTimeout(elem.movement);
   }
   if (!elem.style.left) {
       elem.style.left = "0px";
   }
   if (!elem.style.top) {
       elem.style.top = "0px";
   }
   if (xpos == final_x && ypos == final_y) {
       return true;
   }
  
   //直接将目标位置赋值给图片当前位置。也可以采用以下代码产生动画

  
   //以下代码：按间隔时间、平均移动的距离，缓慢移动图片到目标位置，产生动画效果
   var dist;
      if(xpos < final_x){
    dist = Math.ceil((final_x - xpos)/10);
    xpos += dist;
   }
   if(xpos > final_x){
    dist = Math.ceil((xpos - final_x)/10);
    xpos -= dist;
   }
   if(ypos < final_y){
    dist = Math.ceil((final_y - ypos)/10);
    ypos += dist;
   }
   if(ypos > final_y){
    dist = Math.ceil((ypos - final_y)/10);
    ypos -= dist;
   }
   elem.style.left = xpos + "px";
   elem.style.top = ypos + "px";
   var repeat = "movePic('" + pic + "'," + final_x + "," + final_y + "," + interval + ")";
   elem.movement = setTimeout(repeat,interval);          
  }
  //当鼠标移动到小图片上时切换图片
  function changePic(){
   if(!document.getElementById('picfocus')) return false;
   document.getElementById('picfocus').onmouseover = function(){autokey = true};
   document.getElementById('picfocus').onmouseout = function(){autokey = false};
   var picbtns = document.getElementById("picbtn").getElementsByTagName("li");  
   var picnums = picbtns.length;
   picbtns[0].onmouseover = function(){
    movePic('pic',0,0,5);
    classNormal('picbtn','pictxt');
    classCurrent('picbtn','pictxt',0);   
   }
   if(picnums >= 2){
    picbtns[1].onmouseover = function(){
    movePic('pic',0,-225,5);
    classNormal('picbtn','pictxt');
    classCurrent('picbtn','pictxt',1);   
       } 
   }
   if(picnums >= 3){
    picbtns[2].onmouseover = function(){
    movePic('pic',0,-450,5);
    classNormal('picbtn','pictxt');
    classCurrent('picbtn','pictxt',2);   
       } 
   }
   if(picnums >= 4){
    picbtns[3].onmouseover = function(){
    movePic('pic',0,-675,5);
    classNormal('picbtn','pictxt');
    classCurrent('picbtn','pictxt',3);   
       } 
   }
  }
  //自动切换图片
  var autokey = false;
  setInterval('autoChange()',5000);
  function autoChange(){
   if(autokey) return false;
   var picbtns = document.getElementById("picbtn").getElementsByTagName("li");
   var len = picbtns.length;
   for(var i = 0; i < len; i++){
   if(picbtns[i].className == "current"){
     var currentNum = i;
    }
   }
   if(currentNum == 0 && len >= 1){
    movePic('pic',0,-225,5);
    classNormal('picbtn','pictxt');
    classCurrent('picbtn','pictxt',1); 
   }
   if(currentNum == 1 && len >= 2){
    movePic('pic',0,-450,5);
    classNormal('picbtn','pictxt');
    classCurrent('picbtn','pictxt',2); 
   }
   if(currentNum == 2 && len >= 3){
    movePic('pic',0,-675,5);
    classNormal('picbtn','pictxt');
    classCurrent('picbtn','pictxt',3); 
   }
   if(currentNum == 3 && len >= 4){
    movePic('pic',0,0,5);
    classNormal('picbtn','pictxt');
    classCurrent('picbtn','pictxt',0); 
   }
  }
  addEventLoad(changePic);

</script>

3：相关html代码为：

<body>

<div id="picfocus">
  <div id="piclist">
      <div id="pic" style="left:0px; top:0px;">
          <ul>
              <li><a href="#" target="_blank"><img border="0" alt="" src="https://p1.ssl.qhimg.com/t0173f3dea88ac15b71.jpg" /></a></li>
              <li><a href="#" target="_blank"><img  border="0" alt="" src="https://p1.ssl.qhimg.com/t01bef86c511e1f1cec.jpg" /></a></li>
              <li><a href="#" target="_blank"><img border="0" alt="" src="https://p1.ssl.qhimg.com/t016e4e5efc68cc85d3.jpg" /></a></li>
              <li><a href="#" target="_blank"><img border="0" alt="" src="https://p2.ssl.qhimg.com/t01a10ab682ccc5b641.jpg" /></a></li>                       
           </ul>
      </div>
      <div id="pictxtbg"></div>
      <div id="pictxt">
            <ul>
              <li class="current">刘金山被拒门外踹保安？助理：是劝架</li>
              <li class="normal">《复仇者联盟》《与妻书》《形影不离》映 </li>
              <li class="normal">李雪健问鼎百合奖为晚辈蒋梦婕提裙子</li>
              <li class="normal">刘亦菲携干爹深夜会友人贴面吻告别</li>
           </ul>
      </div>
  </div>
  <div id="picbtn">
      <ul>
              <li class="current"><img src="https://p2.ssl.qhimg.com/t01a10ab682ccc5b641.jpg" /></li>
              <li class="normal"><img src="https://p1.ssl.qhimg.com/t016e4e5efc68cc85d3.jpg" /></li>                
              <li class="normal"><img src="https://p1.ssl.qhimg.com/t01bef86c511e1f1cec.jpg" /></li>
              <li class="normal"><img src="https://p1.ssl.qhimg.com/t0173f3dea88ac15b71.jpg" /></li>         
          </ul>
  </div>
</div>
</body>