首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

纯JS焦点图特效实例(可一个页面多用)

Posted in Javascript onDecember 07, 2016

实例如下：

<!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>
<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="images/ink_120615_10.jpg" alt="三水点靠木 3water.com" /></a></li>
  <li><a href="#"><img src="images/ink_120615_11.jpg" alt="三水点靠木 3water.com" /></a></li>
  <li><a href="#"><img src="images/ink_120615_12.jpg" alt="三水点靠木 3water.com" /></a></li>
  <li><a href="#"><img src="images/ink_120615_10.jpg" alt="三水点靠木 3water.com" /></a></li>
  <li><a href="#"><img src="images/ink_120615_11.jpg" alt="三水点靠木 3water.com" /></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="https://3water.com" target="_blank">web应用</a></li>
  <li><a href="https://3water.com" target="_blank">IT云动态</a></li>
  <li><a href="https://3water.com" target="_blank">HTML学习</a></li>
  <li><a href="https://3water.com" target="_blank">图文特效集锦</a></li>
  <li><a href="https://3water.com" 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="images/ink_120615_12.jpg" alt="三水点靠木 3water.com" /></a></li>
  <li><a href="#"><img src="images/ink_120615_10.jpg" alt="三水点靠木 3water.com" /></a></li>
  <li><a href="#"><img src="images/ink_120615_11.jpg" alt="三水点靠木 3water.com" /></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=https://3water.com" target="_blank">HTML学习</a></li>
  <li><a href="https://3water.com" target="_blank">图文特效集锦</a></li>
  <li><a href="https://3water.com" 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;">三水点靠木 3water.com<a style="color:#FFF" href="https://3water.com" target="_blank">3water.com</a></p>
</div>
</body>
</html>

以上这篇纯JS焦点图特效实例(可一个页面多用)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

纯JS焦点图特效实例(可一个页面多用)

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
JavaScript字符串对象slice方法入门实例（用于字符串截取）
Oct 16 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
vuex存值与取值的实例
Nov 06 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 #Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 #Javascript
jquery插入兄弟节点的操作方法
Dec 07 #Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 #Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 #Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 #Javascript
Bootstrap风格的WPF样式
Dec 07 #Javascript
南非购物网站(8) 哥伦比亚购物网站(5) 荷兰购物网站(99) 葡萄牙购物网站(13) 芬兰购物网站(10) 比利时购物网站(33) 欧洲购物网站(15) 瑞典购物网站(55) 土耳其购物网站(10) 泰国购物网站(30)
You might like
PHP快速排序quicksort实例详解
2016/09/28 PHP
万能的php分页类
2017/07/06 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python的继承知识点总结
2018/12/10 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python类及获取对象属性方法解析
2020/06/15 Python
用python写爬虫简单吗
2020/07/28 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
秘书岗位职责
2013/11/18 职场文书
展会邀请函范文
2014/01/26 职场文书
开业庆典主持词
2014/03/21 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
社区节水倡议书
2015/04/29 职场文书
开展警示教育活动总结
2015/05/09 职场文书
城南旧事读书笔记
2015/06/29 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP
python脚本框架webpy的url映射详解
2021/11/20 Python
一文解答什么是MySQL的回表
2022/08/05 MySQL