js实现非常简单的焦点图切换特效实例


Posted in Javascript onMay 07, 2015

本文实例讲述了js实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。具体分析如下:

这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* {margin:0;padding:0;}
ul, li {list-style:none;}
.mid {margin:0 auto;}
.area {
width:240px;height:270px;
overflow:hidden;background:#999;
margin-top:150px;position:relative;
}
#pic_list {
position:relative;
}
#pic_list li {
position:absolute;visibility:hidden;
}
#pic_list li.show {
visibility:visible;
}
#pic_list li img {
vertical-align:middle;
}
.button {
width:240px;height:20px;
line-height:20px;background:#ccc;
position:absolute;bottom:0px;
}
#button {
float:right;
}
#button li {
float:left;width:20px;height:20px;
text-align:center;margin:0 3px;
font-family:"Arial";font-size:12px;
color:#fff;background:#000;
}
#button li.current {
background:#f00;cursor:pointer;
}
</style>
</head>
<body>
<div class="area mid">
 <div id="imgbox" class="bbbb">
  <ul id="pic_list" class="aaaa">
   <li class="show" id="one">
   <img src="images/1317279971_77011100.jpg" width="240" />
   </li>
   <li id="two">
   <img src="images/1317279972_01691900.jpg" width="240" />
   </li>
   <li id="three">
   <img src="images/1317279973_69082200.jpg" width="240" />
   </li>
   <li id="four">
   <img src="images/1317281054_38572100.jpg" width="240" />
   </li>
   <li id="five">
   <img src="images/1317281056_61630800.jpg" width="240" />
   </li>
  </ul>
 </div>
 <div class="button" class="dddd">
  <ul id="button" class="cccc">
   <li class="current" id="but_one">1</li>
   <li id="but_two">2</li>
   <li id="but_three">3</li>
   <li id="but_four">4</li>
   <li id="but_five">5</li>
  </ul>
 </div>
</div>
<script type="text/javascript">
(function(){
var imgbox = document.getElementById("imgbox");
var pic_list = document.getElementById("pic_list");
var pics = pic_list.getElementsByTagName("li");
var button = document.getElementById("button").getElementsByTagName("li");
var p;
var start;
function autoplay(start){for(i=start;i<button.length;i++){
//设置起始值为start参数.
 (function(){
 var p=i;
 // 为p赋值i. i等于0,1,2,3,4;
 button[i].onmouseover=function change(){
 //button[0],button[1],button[2],button[3],button[4]
 //onmouseover可以触发函数;
 for(j=0;j<this.parentNode.childNodes.length;j++){
 //以this(当前触发事件的元素)为起点,的父节点的所有子节点
 //的length值为最高值,开始遍历. ;
 this.parentNode.childNodes[j].className="";
 //以this(当前触发事件的元素)为起点
 //的父节点的所有子节点的className为空. 危险慎用.;
  }
 this.className="current";
 //this. 即当前触发onmouseover的元素的className为"current";
 for(m=0;m<pics.length;m++){
 //以pics.length为最高值进行遍历.遍历pics.;
 pics[m].className="";
 //清空所有pics数组中所有元素的className;
 if (m==p){
 //当m==p (p==i) 所以m=i时,触发下列函数
  pics[m].className="show";
  //pics的第m个元素的className值为show; m在这里等于i;
  }
 }
 }
 })();
 }
}
autoplay(0);
})();
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
小程序实现上传视频功能
Aug 18 Javascript
jQuery中closest和parents的区别分析
May 07 #Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 #Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 #Javascript
JavaScript更改字符串的大小写
May 07 #Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 #Javascript
JS基于面向对象实现的放烟花效果
May 07 #Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 #Javascript
You might like
php数组添加元素方法小结
2014/12/20 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python中单下划线_的常见用法总结
2018/07/10 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
pytorch permute维度转换方法
2018/12/14 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
个人党性剖析材料
2014/02/03 职场文书
事假请假条范文
2014/04/11 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
新闻稿怎么写
2015/07/18 职场文书
2016党员入党决心书
2015/09/22 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server