<!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> <h1>无特效图片焦点图特效（可一个页面多用）</h1> <div> <!--效果开始--> <div> <div> <div> <ul> <li><a href="#"><img src="https://www.jb51.net/images/ink_120615_10.jpg" alt="脚本之家 " /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/ink_120615_11.jpg" alt="脚本之家 " /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/ink_120615_12.jpg" alt="脚本之家 " /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/ink_120615_10.jpg" alt="脚本之家 " /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/ink_120615_11.jpg" alt="脚本之家 " /></a></li> </ul> </div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div> <li><a href="https://www.jb51.net" target="_blank">web应用</a></li> <li><a href="https://www.jb51.net" target="_blank">IT云动态</a></li> <li><a href="https://www.jb51.net" target="_blank">HTML学习</a></li> <li><a href="https://www.jb51.net" target="_blank">图文特效集锦</a></li> <li><a href="https://www.jb51.net" target="_blank">文章特效集锦</a></li> </div> <div></div> </div> </div> <script type="text/javascript">mainfun("movePic1",2000)</script> <div></div> <div> <div> <div> <ul> <li><a href="#"><img src="https://www.jb51.net/images/ink_120615_12.jpg" alt="脚本之家 " /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/ink_120615_10.jpg" alt="脚本之家 " /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/ink_120615_11.jpg" alt="脚本之家 " /></a></li> </ul> </div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <div> <li><a href=https://www.jb51.net" target="_blank">HTML学习</a></li> <li><a href="https://www.jb51.net" target="_blank">图文特效集锦</a></li> <li><a href="https://www.jb51.net" target="_blank">文章特效集锦</a></li> </div> <div></div> </div> </div> <script type="text/javascript">mainfun("movePic2",3000)</script> <!--End--> </div> <div> <p>脚本之家 <a href="https://www.jb51.net" target="_blank"></a></p> </div> </body> </html>
以上这篇纯JS焦点图特效实例(可一个页面多用)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: