上下竖立切换幻灯片特效

可点击竖立焦点切换幻灯片DIV+CSS+JS特效，自动切换图片幻灯片CSS特效图例代码+下载+在线演示。

自动切换图片幻灯片特效截图：

自动切换幻灯片特效截图

此自动切换主要HTML代码：

<div class="visit_15"><div id="tab-wrap"> 
 <ul class="list"> 
  <li> 
   <a href=""><img src="1.jpg" width="980" height="179" alt="竖立点幻灯片特效" /></a>
     <div class="bg-right"></div> 
  </li> 
  <li> 
   <a href="//www.html8.com.cn/"><img src="2.jpg" width="980" alt="css学习" height="179" /></a>
     <div class="bg-right"></div> 
  </li> 
  <li> 
   <img src="3.jpg" width="980" height="179" />
     <div class="bg-right"></div> 
  </li> 
  <li> 
   <img src="4.jpg" width="980" height="179" />
     <div class="bg-right"></div> 
  </li> 
  <li> 
   <img src="5.jpg" width="980" height="179" />
     <div class="bg-right"></div> 
  </li> 
 </ul> 
</div> 
</div> 

焦点竖立CSS代码：

body{ text-align:center} 
*{margin:0;padding:0;list-style:none;} 
.visit_15{width:980px; margin:0 auto;overflow:hidden; clear:both;} 
isit_15 li{width:245px;float:left;} 
#tab-wrap {width:980px;position:relative;overflow:hidden;} 
#tab-wrap .list {position:relative;height:179px;} 
#tab-wrap .list li {position:absolute;top:0;left:0;width:100%;height:180px;} 
#tab-wrap .list li img {margin:0 auto;width:980px;} 
#tab-wrap .list li .bg-right {position:absolute;top:0;right:0;width:50%;height:179px;z-index:-1;} 
#tab-wrap .count {position:absolute;left:50%;width:10px;height:125px;top:75px;margin-left:470px;z-index:300;} 
#tab-wrap .count li {float:left;width:10px;height:10px;background:#ccc;margin-bottom:10px;} 
#tab-wrap .count li:hover{cursor:pointer;} 
#tab-wrap .count li.current {background:#85BE2E;} 

此幻灯片CSS+JS特效的全部JS代码：

<script type="text/javascript"> 
  window.onload=function(){ 
   var oTab=document.getElementById("tab-wrap"); 
   var oList=oTab.getElementsByTagName("ul")[0]; 
   var aLi=oTab.getElementsByTagName("li"); 
   var aImg=oTab.getElementsByTagName("img"); 
   var aDiv=oTab.getElementsByTagName("div"); 
   var sWidth=aImg[0].offsetHeight; 
   var iindex=i=0; 
   var timer=playTimer=null; 
   var bOrder=true; 
   var aTmp=[]; 
   var aLib=[0]; 
   var aClor=[["#FFFFFF","#FFFFFF"],["#FFFFFF","#FFFFFF"],["#FFFFFF","#FFFFFF"],["#FFFFFF","#FFFFFF"],["#FFFFFF","#FFFFFF"]]; 
   //HTML8提示：有多少组图片，这里就有多少组,["#FFFFFF","#FFFFFF"] 
   for(i=0;i<aLi.length;i++){ 
    aTmp.push("<li></li>") 
   } 
   var oCount=document.createElement("ul"); 
   oCount.className="count"; 
   oCount.innerHTML=aTmp.join(""); 
   oTab.appendChild(oCount); 
   // 
   var aBtn=oTab.getElementsByTagName("ul")[1].getElementsByTagName("li"); 
   for(i=0;i<aBtn.length;i++){ 
    aBtn[i].index=i; 
    aBtn[i].onclick=function(){ 
     index=this.index; 
     aLib.push(index); 
     if(aLib.length>2){aLib.shift()}; 
     for(i=0;i<aBtn.length;i++){ 
      aBtn[i].className=""; 
      aLi[i].style.zIndex=100; 
      aLi[i].style.display="none"; 
     } 
     aBtn[index].className="current"; 
     aLi[index].style.zIndex=200; 
     aLi[index].style.top=sWidth+"px"; 
     aLi[index].style.display="block"; 
     aLi[aLib[0]].style.display="block"; 
     aLi[index].style.background=aClor[index][0]; 
     aDiv[index].style.background=aClor[index][1]; 
     if(aLib[0]!=aLib[1]){ 
      showMove(aLi[index]) 
     }else { 
      aLi[index].style.top=0; 
     } 
      
    } 
   } 
   // 
   aBtn[index].className="current"; 
   aLi[index].style.zIndex=200; 
   aLi[index].style.background=aClor[index][0]; 
   aDiv[index].style.background=aClor[index][1]; 
   autoPlay(); 
   // 
   oTab.onmouseover=function(){ 
    clearInterval(playTimer); 
   } 
   oList.onmouseout=function(){ 
    autoPlay(); 
   } 
   // 
   function autoPlay(){ 
    playTimer=setInterval(function(){ 
     index==aBtn.length-1 && (bOrder=false); 
     index==0 && (bOrder=true); 
     bOrder ? index++ : index--; 
     //console.log(index); 
     aBtn[index].onclick(); 
    },5000) 
   } 
   // 
   function showMove(obj){ 
    clearInterval(timer); 
    timer=setInterval(function(){ 
     doMove(obj) 
    },30) 
   } 
   // 
   function doMove(obj){ 
    var iSpeed=obj.offsetTop/10; 
    iSpeediSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 
    obj.offsetTop<=0 ? clearInterval(timer) : objobj.style.top=obj.offsetTop-iSpeed+"px"; 
   } 
  }  
  </script> 

大家可直接复制以上代码即可使用。

在线示范：查看案例

在线下载：