纯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 ...

随机推荐

Python的基础--对象转
对象(Objects)是python中数据的抽象,python中所有的数据均可以用对象或者是对象之间的关系来表示.每个对象均有标识符(identity).类型(type).值(value). 标识 ...
MySQL Router 测试使用转
MySQL Router 测试使用 . 特性 MySQL Router 并没有包括一些特别新的特性, 总体上看中规中矩, 不过 first-available 和插件两个特性挺有意思, 后续会进行讲解 ...
PAT 1002
1002. A+B for Polynomials (25) This time, you are supposed to find A+B where A and B are two polynom ...
Debian5.04安装oracle11g 笔记
新安装了Debian5,成功安装了oracle11g.记录过程如下. 1.升级一下系统 #apt-get update #apt-get upgrade 2.安装需要的一些组件: # ...
Hibernate的简单示例
首先我们新建一个项目,Java项目或者是Javaweb项目都可以,然后把hibernate需要的jar导入,我用的jar包如下: 然后新建一个实体类Teacher.java并添加get和set方法: ...
css笔记11：选择器练习
1. (1)exam1.css文件: .s1 { font-size: 50px; color: blue; } .s2 { backgoround:gray; font-style: italic; ...
总结nonatomic,assigncopy,retain
nonatomic:非原子性访问,不加同步,多线程并发访问会提高性能.如果不加此属性,则默认是两个访问方法都为原子型事务访问. (atomic是Objc使用的一种线程保护技术,基本上来讲,是防止在写未 ...
sql server 2008 com.microsoft.sqlserver.jdbc.SQLServerException: 通过端口 1433 连接到主机
右击我的电脑,点击管理右击"TCP/IP"选择"属性"(或双击"TCP/IP"),选择"IP地址"选项卡,最下面有个& ...
java中的静态方法
静态方法是属于类的,内存必须为它分配内存空间,这个空间一直由静态方法占用,内存管理器不会由于静态方法没有被调用而将静态方法的存储空间收回,这样如果将所有的方法都声明为静态方法,就会占用大量的内存空间, ...
java调用.net asmx服务
有时候,在java下开发会调用一下.net下写的服务,看网上有各种方法,但总是不成功,总结下自己测试过能调用成功的方式: 1. 原始方式http-soap public static String p ...

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

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

随机推荐

热门专题