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

随机推荐

oc-06-无参方法的调用
// 12-[掌握]无参方法声明实现及调用 #import <Foundation/Foundation.h> //类的声明 @interface Person : NSObject { ...
printf, fprintf, sprintf, snprintf, vprintf, vfprintf, vsprintf, vsnprintf - 输出格式转换函数
参考:http://blog.sina.com.cn/s/blog_674b5aae0100prv3.html 总览 (SYNOPSIS) #include <stdio.h> int p ...
sqlserver 字符串相关函数
http://www.cnblogs.com/jiajiayuan/archive/2011/06/16/2082488.html 以下所有例子均Studnet表为例: 计算字符串长度len()用来 ...
Invalidate、RedrawWindow与UpdateWindow
Invalidate.RedrawWindow与UpdateWindow的区别 Invalidate()是强制系统进行重画,但是不一定就马上进行重画.因为Invalidate()只是通知系统,此时的 ...
刚安装完jdk和eclipse需要配置什么？
还需要配置环境变量,你还要下载 apache-tomcat WEB服务器,也就是说系统能找到你的服务器,具体配置:(在windows桌面上右击“我的电脑” —> “属性” —> “高级 ...
HTTP协议理解
HTTP(Hyper Text Transfer Protocol)超文本传输协议,是一种请求响应式协议,类似两国会晤中需要遵守的规则.那么,其中有什么内容特点呢? HTTP特点: 1)支持客户端/服 ...
myeclipse web 包名保留字与servlet冲突
包名不能取modify ..........等保留字不能有数字
oracle中序列的使用
转载:http://blog.csdn.net/java958199586/article/details/7360152 序列: 是oacle提供的用于产生一系列唯一数字的数据库对象. l 自动提 ...
html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
Ehcache(2.9.x) - API Developer Guide, Searching a Cache
About Searching The Search API allows you to execute arbitrarily complex queries against caches. The ...

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

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

随机推荐

热门专题