纯JS焦点图特效实例(可一个页面多用)

2019-11-19 18:38:37

字体：大中小

来源：转载

供稿：网友

实例如下：

<!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><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="武林网 www.VeVB.COm" /></a></li>  <li><a href="#"><img src="images/ink_120615_11.jpg" alt="武林网 www.VeVB.COm" /></a></li>  <li><a href="#"><img src="images/ink_120615_12.jpg" alt="武林网 www.VeVB.COm" /></a></li>  <li><a href="#"><img src="images/ink_120615_10.jpg" alt="武林网 www.VeVB.COm" /></a></li>  <li><a href="#"><img src="images/ink_120615_11.jpg" alt="武林网 www.VeVB.COm" /></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="//www.VeVB.COm" target="_blank">web应用</a></li>  <li><a href="//www.VeVB.COm" target="_blank">IT云动态</a></li>  <li><a href="//www.VeVB.COm" target="_blank">HTML学习</a></li>  <li><a href="//www.VeVB.COm" target="_blank">图文特效集锦</a></li>  <li><a href="//www.VeVB.COm" 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="武林网 www.VeVB.COm" /></a></li>  <li><a href="#"><img src="images/ink_120615_10.jpg" alt="武林网 www.VeVB.COm" /></a></li>  <li><a href="#"><img src="images/ink_120615_11.jpg" alt="武林网 www.VeVB.COm" /></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=//www.VeVB.COm" target="_blank">HTML学习</a></li>  <li><a href="//www.VeVB.COm" target="_blank">图文特效集锦</a></li>  <li><a href="//www.VeVB.COm" 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;">武林网 www.VeVB.COm<a style="color:#FFF" href="//www.VeVB.COm" target="_blank">www.VeVB.COm</a></p></div></body></html>

以上这篇纯JS焦点图特效实例(可一个页面多用)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

下一篇：探究JavaScript中的五种事件处理程序方式