首页
所有分类
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 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
javascript天然的迭代器
Oct 29 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
js星星评分效果
Jul 24 Javascript
javascript实现倒计时（精确到秒）
Jun 26 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
js 轮播效果实例分享
Dec 28 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
Vue组件化开发思考
Feb 02 Javascript
vue-cli3+typescript初体验小结
Feb 28 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
Springboot-cli(1) JAVA(88) 底部导航(1) FutureTask(3) 对齐打印(1) ForkJoin(1) format(1) CompletableFuture(1) 主题(1) 异步回调(1)
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
NT IIS下用ODBC连接数据库
2006/10/09 PHP
PHP简介
2006/10/09 PHP
Win2003服务器安全加固设置－-进一步提高服务器安全性
2007/05/23 PHP
php mysql索引问题
2008/06/07 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
页面中js执行顺序
2009/11/09 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
vue监听用户输入和点击功能
2019/09/27 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
Melissa鞋马来西亚官方网站：MDreams马来西亚
2018/04/05 全球购物
递归实现回文判断（如：abcdedbca就是回文，判断一个面试者对递归理解的简单程序）
2013/04/28 面试题
shell的种类有哪些
2015/04/15 面试题
奥林匹克的口号
2014/06/13 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
初中优秀学生评语
2014/12/29 职场文书
孔庙导游词
2015/02/04 职场文书
公务员个人总结
2015/02/12 职场文书
汉语拼音教学反思
2016/02/22 职场文书
python某漫画app逆向
2021/03/31 Python
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby