這篇文章主要介紹了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=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程序設計有所幫助。
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
