纯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焦点图特效实例(可一个页面多用)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

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