首页
所有分类
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批量修改记录的代码
Jun 25 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
vue select 获取value和lable操作
Aug 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
YH-R296(1) 上海永华(1) GF515(1) 华普R-96(1) 德劲1107(1) SRF-M100(1) 德劲1102(1) 安健(1) SRF-22W(1) A254(1)
You might like
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
destoon会员注册提示“数据校验失败（2）”解决方法
2014/06/21 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
使用vue-cli（vue脚手架）快速搭建项目的方法
2018/05/21 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
黄色火烈鸟：De Gele Flamingo
2019/03/18 全球购物
NFL官方在线商店：NFLShop
2020/07/29 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
应届生求职推荐信
2013/10/28 职场文书
校园文明标语
2014/06/13 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
教师批评与自我批评
2014/10/15 职场文书
党的群众路线教育实践活动个人对照检查材料（公安）
2014/11/05 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书