足球游戏_中国足彩网¥体育资讯$

js实现非常简单的焦点图切换特效实例
来源:易贤网 阅读:1238 次 日期:2015-05-11 14:44:30
温馨提示:易贤网小编为您整理了“js实现非常简单的焦点图切换特效实例”,方便广大网友查阅!

这篇文章主要介绍了js实现非常简单的焦点图切换特效,是一个非常简单的js焦点图切换效果,涉及javascript操作鼠标事件与图片的相关技巧,需要的朋友可以参考下

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<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程序设计有所帮助。

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标