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 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
数组Array的排序sort方法
Feb 17 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php 类自动载入的方法
2015/06/03 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
体育运动口号
2014/06/09 职场文书
忠诚教育心得体会
2014/09/03 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
中秋节晚会开场白
2015/05/29 职场文书