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

网络编程 2024/11/13 佚名

3 2 1

实例如下：

<!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'"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'"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="/UploadFiles/2021-04-02/ink_120615_10.jpg">

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

js焦点图特效