首页
所有分类
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 相关文章推荐
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 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
匹配文本(1) 裁剪图片(1) PIL(1) 文字识别(1) Pytesseract(1) SFTP(3) 追加文本(1) 验证码(1) GCN(1) 柱状图(1)
You might like
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
Yii核心验证器api详解
2016/11/23 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
新手入门常用代码集锦
2007/01/11 Javascript
又一个小巧的图片预加载类
2007/05/05 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
全面了解js中的script标签
2016/07/04 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
vue+moment实现倒计时效果
2019/08/26 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
加拿大大码女装购物网站：Penningtons
2020/12/26 全球购物
安全协议书范本
2014/04/21 职场文书
投资建议书模板
2014/05/12 职场文书
爱我中华演讲稿
2014/05/20 职场文书
代办社保委托书范文
2014/10/06 职场文书
2015年化验员工作总结
2015/04/10 职场文书
女方离婚起诉书
2015/05/18 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书