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

JS网页特效-无特效图片焦点图特效(可一个页面多用)

* { 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;}

* { 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;}

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

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).οnmοuseοver=function(){clearInterval(timer);}

getID(mainObj).οnmοuseοut=function(){timer = setInterval(autoPlay,t);}

function changePic(ocut){

for(i=0;i

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

getUl[i].style.display="none";

getBtn[i].οnclick=(function(i){

return function(){

clickMenu(i);

}

})(i);

}

getUl[sel].style.display="block";

function clickMenu(sel){

for(i=0;i

getUl[i].style.display="none";

}

getUl[sel].style.display="block";

}

}

无特效图片焦点图特效(可一个页面多用)

• 
• 
• 
• 
• 

• 1
• 2
• 3
• 4
• 5

web应用 IT云动态 HTML学习 图文特效集锦 文章特效集锦

• 
• 
• 

• 1
• 2
• 3

HTML学习 图文特效集锦 文章特效集锦

脚本之家 www.jb51.netwww.jb51.net