<!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焦点图特效（可一个页面多用）的更多相关文章

  1. 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  2. 强大的自适应jQuery焦点图特效

    jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...

  3. 一款jQuery仿海尔官网全屏焦点图特效代码

    一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

  4. （转）轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程

    myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左 ...

  5. [Js]焦点图轮播效果

    一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...

  6. JS焦点图 上下翻动 支持IE6

    <div class="slider"> <ul class="num" id="homePushName"> &l ...

  7. thymeleaf中js跳转到另外一个页面

    <script type="text/javascript"> setTimeout("location.href='index'", 3000); ...

  8. jQuery跳转到另一个页面以及原生js跳转到另一个页面

    1.原生js我们可以利用http的重定向来跳转 window.location.replace("https://www.cnblogs.com/pythonywy/"); 2.原 ...

  9. jQuery手机触屏左右滑动切换焦点图特效代码

    原文地址:http://www.17sucai.com/pins/4857.html 演示地址:http://www.17sucai.com/pins/demoshow/4857 干净演示地址:htt ...

随机推荐

  1. Mac下使用Fiddler

    Fiddler是用C#开发的.  所以Fiddler不能在Mac系统中运行.  没办法直接用Fiddler来截获MAC系统中的HTTP/HTTPS,    Mac 用户怎么办呢? Fiddler可以允 ...

  2. Jordan Lecture Note-11: 典型相关分析(Canonical Correlation Analysis, CCA).

    典型相关分析 (一)引入 典型相关分析(Canonical Correlation Analysis)是研究两组变量之间相关关系的一种多元统计方法.他能够揭示出两组变量之间的内在联系. 我们知道,在一 ...

  3. 利用mmap /dev/mem 读写Linux内存

    转载:http://blog.csdn.net/zhanglei4214/article/details/6653568 使用 hexedit /dev/mem 可以显示所有物理内存中的信息. 运用m ...

  4. 经常被忽略的几个CSS3属性之强大应用（一、timing-function: steps()　二、animation-direction 　三、timing-function: cubic-bezier()）

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  5. Eclipse输入任意字母或指定字符出现提示框

    Eclipse默认是输入"."的时候会有提示框提示对应的API. 如果想更方便的输入任意字母或者指定的符号出现提示框设置如下: 打开Eclipse,选中“Window”->& ...

  6. 关于eclipse中删除多余的工作空间记录

    这个Eclipse是拷贝的别人的,前三个是别人在使用这个Eclipse的时候定义的路径,到我本地机器是多余的.如何删除这三个默认的工作空间路径. 这个路径的list是读取的Eclipse中的一个文件, ...

  7. poj 3352 边连通分量

    思路与poj3177一模一样. #include<iostream> #include<cstdio> #include<cstring> #include< ...

  8. poj 2942 点的双连通分量

    思路: 对于该图,直接用建图貌似没法解,所以也很容易想到建补图,这样存在边的两个点就能再圆桌上做一起.也就将问题转化为对双连通分量中是否存在奇圈了. 我们将每次查询的边保存在stack中,当遇到关键点 ...

  9. Android Fragment 实例

    Fragment是Android honeycomb 3.0新增的概念,在Android——Fragment介绍.Android Fragment使用.Android FragmentManage F ...

  10. 使用C#动态生成Word文档/Excel文档的程序测试通过后，部署到IIS服务器上，不能正常使用的问题解决方案

    使用C#动态生成Word文档/Excel文档的程序功能调试.测试通过后,部署到服务器上,不能正常使用的问题解决方案: 原因: 可能asp.net程序或iis访问excel组件时权限不够(Ps:Syst ...