纯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="data:images/ink_120615_10.jpg" alt="科e互联网页特效" /></a></li>

      <li><a href="#"><img src="data:images/ink_120615_11.jpg" alt="科e互联网页特效" /></a></li>

      <li><a href="#"><img src="data:images/ink_120615_12.jpg" alt="科e互联网页特效" /></a></li>

      <li><a href="#"><img src="data:images/ink_120615_10.jpg" alt="科e互联网页特效" /></a></li>

      <li><a href="#"><img src="data: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="data:images/ink_120615_12.jpg" alt="科e互联网页特效" /></a></li>

      <li><a href="#"><img src="data:images/ink_120615_10.jpg" alt="科e互联网页特效" /></a></li>

      <li><a href="#"><img src="data: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

纯JS焦点图特效（可一个页面多用）的更多相关文章

一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器
基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...
强大的自适应jQuery焦点图特效
jQuery焦点图切换自适应效果自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...
一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...
（转）轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程
myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左 ...
[Js]焦点图轮播效果
一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法二.结构和样式 <div id="banner" class=&q ...
JS焦点图上下翻动支持IE6
<div class="slider"> <ul class="num" id="homePushName"> &l ...
thymeleaf中js跳转到另外一个页面
<script type="text/javascript"> setTimeout("location.href='index'", 3000); ...
jQuery跳转到另一个页面以及原生js跳转到另一个页面
1.原生js我们可以利用http的重定向来跳转 window.location.replace("https://www.cnblogs.com/pythonywy/"); 2.原 ...
jQuery手机触屏左右滑动切换焦点图特效代码
原文地址:http://www.17sucai.com/pins/4857.html 演示地址:http://www.17sucai.com/pins/demoshow/4857 干净演示地址:htt ...

随机推荐

嵌入式设备上的 Linux 系统开发
转载:http://www.ibm.com/developerworks/cn/linux/embed/embdev/index.html 如果您刚接触嵌入式开发,那么大量可用的引导装载程序(bo ...
小白日记37：kali渗透测试之Web渗透-手动漏洞挖掘（三）-目录遍历、文件包含
手动漏洞挖掘漏洞类型 #Directory traversal 目录遍历[本台机器操作系统上文件进行读取] 使用者可以通过浏览器/URL地址或者参数变量内容,可以读取web根目录[默认为:/var/ ...
HTML 之 Embed兼容问题
首先IE只支持对Object的解析,火狐.谷歌.Safari只支持对Embed的解析. 1.传统的方法 <object classid="clsid:d27cdb6e-ae6d-11c ...
cocos2d-x——在一个cpp中展示多个场景
//20秒后自动运行下一个场景 runAction( CCSequence::create(CCDelayTime::create(20.0f), CCCallFunc::create(this, c ...
C语言预处理操作符
在看<深入剖析Nginx>时看见一个非常少见的C语言知识点:预处理操作符. #define conn(x,y) x##y //将子串x和y连接形成新的串 #define tochar(x) ...
python(3)-函数动态参数
先来看一段代码 def show(*arg): print(arg, type(arg)) if __name__ == "__main__": show(1) show(1,2, ...
VMware系统运维（一）安装Esxi
1.下载ISO文件,开始安装,如图1,直接按回车进行安装. 图1 2.按回车键继续安装,如图2所示图2 3.选择要安装系统的磁盘,按回车继续,如图3所示图3 4.选择对应的键盘语言,按回车继续,如 ...
关于js中event的target和currentTarget的区别
今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...
未能加载文件或程序集“Oracle.DataAccess”或它的某一个依赖项.试图加载格式不正确的程序
.NET:Microsoft Visual Studio 2010 + .NET Framework 3.5 操作系统:windows2008 R2 64 位操作系统 oracle数据库:32位的OD ...
[设计模式]<<设计模式之禅>>关于迪米特法则
迪米特法则(Law of Demeter,LoD)也称为最少知识原则(Least KnowledgePrinciple,LKP),虽然名字不同,但描述的是同一个规则:一个对象应该对其他对象有最少的了解 ...

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

纯JS焦点图特效（可一个页面多用）的更多相关文章

随机推荐

热门专题