快捷導(dǎo)航

js實(shí)現(xiàn)非常簡(jiǎn)單的焦點(diǎn)圖切換特效實(shí)例

更新時(shí)間：2015年05月07日 10:20:04 投稿：shichen2014

這篇文章主要介紹了js實(shí)現(xiàn)非常簡(jiǎn)單的焦點(diǎn)圖切換特效,是一個(gè)非常簡(jiǎn)單的js焦點(diǎn)圖切換效果,涉及javascript操作鼠標(biāo)事件與圖片的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)非常簡(jiǎn)單的焦點(diǎn)圖切換特效的方法。分享給大家供大家參考。具體分析如下：

這是一個(gè)非常非常簡(jiǎn)單的焦點(diǎn)圖（更像滑動(dòng)門(mén)），可供初學(xué)者借鑒參考

<!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>無(wú)標(biāo)題文檔</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++){
//設(shè)置起始值為start參數(shù).
 (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可以觸發(fā)函數(shù);
 for(j=0;j<this.parentNode.childNodes.length;j++){
 //以this(當(dāng)前觸發(fā)事件的元素)為起點(diǎn),的父節(jié)點(diǎn)的所有子節(jié)點(diǎn)
 //的length值為最高值,開(kāi)始遍歷. ;
 this.parentNode.childNodes[j].className="";
 //以this(當(dāng)前觸發(fā)事件的元素)為起點(diǎn)
 //的父節(jié)點(diǎn)的所有子節(jié)點(diǎn)的className為空. 危險(xiǎn)慎用.;
  }
 this.className="current";
 //this. 即當(dāng)前觸發(fā)onmouseover的元素的className為"current";
 for(m=0;m<pics.length;m++){
 //以pics.length為最高值進(jìn)行遍歷.遍歷pics.;
 pics[m].className="";
 //清空所有pics數(shù)組中所有元素的className;
 if (m==p){
 //當(dāng)m==p (p==i) 所以m=i時(shí),觸發(fā)下列函數(shù)
  pics[m].className="show";
  //pics的第m個(gè)元素的className值為show; m在這里等于i;
  }
 }
 }
 })();
 }
}
autoplay(0);
})();
</script>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript定義變量時(shí)帶var與不帶var的區(qū)別分析
這篇文章主要介紹了javascript定義變量時(shí)帶var與不帶var的區(qū)別,以一個(gè)簡(jiǎn)單實(shí)例分析了變量定義時(shí)帶var與不帶var的執(zhí)行原理及用法區(qū)別,需要的朋友可以參考下
2015-01-01
css樣式標(biāo)簽和js語(yǔ)法屬性區(qū)別
css樣式標(biāo)簽和js語(yǔ)法屬性區(qū)別。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
javascript中全局對(duì)象的parseInt()方法使用介紹
全局對(duì)象的parseInt()方法該如何使用，下面為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
JavaScript實(shí)現(xiàn)刷新不重記的倒計(jì)時(shí)
網(wǎng)上關(guān)于JavaScript實(shí)現(xiàn)倒計(jì)時(shí)的文章有很多，但是一般都是刷新后會(huì)重新開(kāi)始計(jì)時(shí)，可是我們有的時(shí)候會(huì)需要刷新卻不重新計(jì)算的倒計(jì)時(shí)，這該怎么做呢？下面我們一起來(lái)看看這種倒計(jì)時(shí)怎么實(shí)現(xiàn)吧。
2016-08-08
JavaScript find()方法及返回?cái)?shù)據(jù)實(shí)例
這篇文章主要介紹了JavaScript中的find()方法和返回?cái)?shù)據(jù)的內(nèi)存指向,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-04-04
微信小程序制作表格的方法
這篇文章主要為大家詳細(xì)介紹了微信小程序制作表格的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-02-02
bootstrap select下拉搜索插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap select下拉搜索插件的使用方法，動(dòng)態(tài)加載自己數(shù)據(jù)的二級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
本篇文章主要介紹了原生JS+Canvas實(shí)現(xiàn)五子棋游戲?qū)嵗?，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06