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

随机推荐

yii2 rbac 设计
tbl_auth_item 根据type存储认证项目...role.task.operation 游客... 不能操作任何模块普通用户 ..biz_rule..需要登录只有这里返回true,才能进 ...
C 高级编程 1
内存管理层次: 硬件层次: 内存结构管理内核算层次: 内存映射堆扩展数据结构层次: 智能指针: stl :在多线程,共享内存有问题 SGI公司实现了STL ,开发了OPENGL库语言层次:C: ...
高级I/O之readn和writen函数
管道.FIFO以及某些设备,特别是终端.网络和STREAMS设备有下列两种性质: (1)一次read操作所返回的数据可能少于所要求的数据,即使还没有达到文件尾端也可能是这样.这不是一个错误,应当继续读 ...
iOS利用单例实现不同界面间的数据传输
首先写一个单例类,继承NSObject check.h文件中 @property(strong ,nonatomic) UITable * Table; @property(strong ,nonit ...
01 MySQL锁概述
锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除传统的计算资源(如CPU.RAM.I/O 等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性.有效性是所有 ...
琐碎-同步centos集群的时间
想马上上手HBase,其对集群时间同步要求很高,当然,hadoop也是
Linq 用法笔记
Linq中怎么用 between…and? var query = from p in context.Parent from c in context.Child.Where(x => p.c ...
jsp无法支持el标签及jstl标签
在jsp页面头部添加如下 <%@ page isELIgnored="false"%> <%@ taglib uri="http://java.sun. ...
hdu 3473 裸的划分树
思路: 用Sum[dep][i]记录从tree[po].l到i中进入左子树的和. #include<iostream> #include<algorithm> #include ...
C#中参数传递【转】
转自[Learning hard] 建议参考『第十一回:参数之惑---传递的艺术(上)』一.引言对于一些初学者(包括工作几年的人在内)来说,有时候对于方法之间的参数传递的问题感觉比较困惑的,因为 ...

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

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

随机推荐

热门专题