纯JS焦点图特效（可一个页面多用）

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS网页特效-无特效图片焦点图特效（可一个页面多用）</title>
<meta name="keywords" content="Javascript网页特效,JS焦点图,JS广告代码,JS代码,JS图文特效" />
<meta name="description" content="科e互联-北京网站建设、网站制作、网站改版、网站优化向您提供原创js特效，欢迎加入QQ群一起学习：47445401" />
<style type="text/css">
* { padding:0; margin:0; font-size:12px; }
ul, li { list-style: none; }
.indexFocus{border:1px solid #CCC; padding:2px;width:419px;height:185px; margin:0 auto;}
.indexFocus .focusBox{width:419px;height:185px;position:relative;margin:0 auto;position:relative}
.indexFocus .focusBox .bigPic{width:419px;height:185px;overflow:hidden;position:relative}
.indexFocus .focusBox .bigPic li{width:419px;height:185px}
.indexFocus .focusBox .bigPic img{width:419px;height:185px}
.indexFocus .focusBox .btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11}
.indexFocus .focusBox .btn ul li{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer}
.indexFocus .focusBox .btn .sel{width:15px;height:15px;background:#B90101;color:#fff}
.indexFocus .focusBox .picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50); /*IE*/-moz-opacity:0.5; /*MOZ , FF*/opacity:0.5;/*CSS3, FF1.5*/}
.indexFocus .focusBox .picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0 auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;}
.indexFocus .focusBox .picText a{padding-left:10px;color:#fff;}
</style>
<style type="text/css">
* { padding:0; margin:0; font-size:12px; }
ul, li { list-style: none; }
.indexFocus{border:1px solid #CCC; padding:2px;width:419px;height:185px; margin:0 auto;}
.indexFocus .focusBox{width:419px;height:185px;position:relative;margin:0 auto;position:relative}
.indexFocus .focusBox .bigPic{width:419px;height:185px;overflow:hidden;position:relative}
.indexFocus .focusBox .bigPic li{width:419px;height:185px}
.indexFocus .focusBox .bigPic img{width:419px;height:185px}
.indexFocus .focusBox .btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11}
.indexFocus .focusBox .btn ul li{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer}
.indexFocus .focusBox .btn .sel{width:15px;height:15px;background:#B90101;color:#fff}
.indexFocus .focusBox .picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50); /*IE*/-moz-opacity:0.5; /*MOZ , FF*/opacity:0.5;/*CSS3, FF1.5*/}
.indexFocus .focusBox .picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0 auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;}
.indexFocus .focusBox .picText a{padding-left:10px;color:#fff;}
</style>
<script language="javascript">
function mainfun(mainObj,t){
         function getID(id){return document.getElementById(id)}
         function getTag(tag,obj){return (typeof obj=='object'?obj:getID(obj)).getElementsByTagName(tag); }
         function alph(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}}
         var cut = 0;
         var timer='';
         var num = getTag('li',getTag('div',getID(mainObj))[0]).length;        
         var getpic = getTag('li',getTag('div',getID(mainObj))[0]);
         var getbtn = getTag('li',getTag('div',getID(mainObj))[1]);
         var gettext = getTag('li',getTag('div',getID(mainObj))[2]);         
         for(i=0;i<num;i++){getpic[i].style.display="none";gettext[i].style.display="none";getbtn[i].onclick=(function(i){
             return function(){ getbtn[i].className="sel";changePic(i);}})(i);}             
             getpic[cut].style.display="block";
             getbtn[cut].className="sel";
             gettext[cut].style.display="block";
         getID(mainObj).onmouseover=function(){clearInterval(timer);}
         getID(mainObj).onmouseout=function(){timer = setInterval(autoPlay,t);}
        function changePic(ocut){
            for(i=0;i<num;i++){cut=ocut;
             getpic[i].style.display="none";
             getbtn[i].className=""            
             gettext[i].style.display="none";
             }
             getpic[cut].style.display="block";
             getbtn[cut].className="sel";
             gettext[cut].style.display="block"    
                      
         }
         function autoPlay(){
             //alert(cut);
             if(cut>=num-1){cut=0}else{cut++}
             changePic(cut);
             }
             timer = setInterval(autoPlay,t);
        }    
        
function changeMenu(){
    function getID(id){return document.getElementById(id)}
    function getTag(tag,obj){return (typeof obj=='object'?obj:getID(obj)).getElementsByTagName(tag); }
    var sel=0;var menu = getID("menu");var getBtn = getTag("h2",menu);    var getUl = getTag("ul",menu);var num = getTag("h2",menu).length;for(i=0;i<num;i++){
        getUl[i].style.display="none";
        getBtn[i].onclick=(function(i){
            return function(){
                clickMenu(i);
                }
            })(i);
        }
        getUl[sel].style.display="block";
    function clickMenu(sel){
    for(i=0;i<num;i++){
        getUl[i].style.display="none";
        }
        getUl[sel].style.display="block";
      }
    }    
</script>
</head>
<body style="background:url(images/bodyBg.jpg) repeat #333;">
<h1 style="height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal">无特效图片焦点图特效（可一个页面多用）</h1>
<div style="background:#FFF; padding:50px;">
<!--效果开始-->
<div class="indexFocus">
   <div id="movePic1" class="focusBox">     
     <div class="bigPic" id="oPic">
     <ul>
      <li><a href="#"><img src="images/ink_120615_10.jpg" alt="科e互联网页特效" /></a></li>
      <li><a href="#"><img src="images/ink_120615_11.jpg" alt="科e互联网页特效" /></a></li>
      <li><a href="#"><img src="images/ink_120615_12.jpg" alt="科e互联网页特效" /></a></li>
      <li><a href="#"><img src="images/ink_120615_10.jpg" alt="科e互联网页特效" /></a></li>
      <li><a href="#"><img src="images/ink_120615_11.jpg" alt="科e互联网页特效" /></a></li>
     </ul>     
     </div>     
     <div class="btn" id="oBtn">
     <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>      
     </ul>
     </div>     
     <div class="picText" id="oText">
      <li><a href="http://www.internetke.com/m2_itm_mode2_4.html" target="_blank">web应用</a></li>
      <li><a href="http://www.internetke.com/m2_itm_mode2_5.html" target="_blank">IT云动态</a></li>
      <li><a href="http://www.internetke.com/m2_itm_mode2_5.html" target="_blank">HTML学习</a></li>
      <li><a href="http://www.internetke.com/m2_js_mode1_27.html" target="_blank">图文特效集锦</a></li>
      <li><a href="http://www.internetke.com/m2_js_txtMode1_30.html" target="_blank">文章特效集锦</a></li>      
     </div>  
     <div class="picText_bg"></div>   
    </div>
   </div>
   <script type="text/javascript">mainfun("movePic1",2000)</script>
   <div style="height:30px;"></div>
   <div class="indexFocus">
   <div id="movePic2" class="focusBox">     
     <div class="bigPic" id="oPic">
     <ul>
      <li><a href="#"><img src="images/ink_120615_12.jpg" alt="科e互联网页特效" /></a></li>
      <li><a href="#"><img src="images/ink_120615_10.jpg" alt="科e互联网页特效" /></a></li>
      <li><a href="#"><img src="images/ink_120615_11.jpg" alt="科e互联网页特效" /></a></li>
     </ul>     
     </div>     
     <div class="btn" id="oBtn">
     <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>    
     </ul>
     </div>     
     <div class="picText" id="oText">
      <li><a href="http://www.internetke.com/m2_itm_mode2_5.html" target="_blank">HTML学习</a></li>
      <li><a href="http://www.internetke.com/m2_js_mode1_27.html" target="_blank">图文特效集锦</a></li>
      <li><a href="http://www.internetke.com/m2_js_txtMode1_30.html" target="_blank">文章特效集锦</a></li>  
     </div>  
     <div class="picText_bg"></div>   
    </div>
   </div>
   <script type="text/javascript">mainfun("movePic2",3000)</script>
<!--End-->
</div>
<div style="height:200px; color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(images/bodyBg2.jpg) repeat-x top left">
<p style="font-size:16px;">科e互联网页特效集锦---更多特效请访问 <a style="color:#FFF" href="http://www.internetke.com/m1_js_content_12.html" target="_blank">www.internetke.com</a></p>
<p style="font-size:14px;">本站关键字：<a href="http://www.internetke.com" style="color:#fff; text-decoration:none">北京网站建设</a> | <a href="http://www.internetke.com" style="color:#fff; text-decoration:none">网站建设</a> | <a href="http://www.internetke.com" style="color:#fff; text-decoration:none">北京网站制作</a> | <a href="http://www.internetke.com" style="color:#fff; text-decoration:none">北京网页设计公司</a> | <a href="http://www.internetke.com" style="color:#fff; text-decoration:none">网站案例</a> | <a href="http://www.internetke.com" style="color:#fff; text-decoration:none">网页特效</a> | <a href="http://www.internetke.com" style="color:#fff; text-decoration:none">网站优化</a></p>
<p style="font-size:14px;">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>

来源：http://www.internetke.com/effects/focus/2013/1120/240.html

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/qigege/p/4993386.html