快捷導(dǎo)航

js 完美圖片新聞輪轉(zhuǎn)效果，騰訊大粵網(wǎng)首頁圖片輪轉(zhuǎn)改造而來

更新時間：2011年11月21日 23:10:34 作者：

找過很多圖片輪詢效果，和我的要求總是有些出入，不能十全十美。不是功能不全，就是太多花哨。本想自己開發(fā)一個，鑒于瑣事拖延，遲遲未能開始

背景
我所想要的完美圖片新聞輪轉(zhuǎn)效果：
1.有新聞圖片，有新聞標(biāo)題，有輪轉(zhuǎn)索引
2.鼠標(biāo)未移到索引上，圖片自動切換
3.鼠標(biāo)移到索引上，顯示現(xiàn)有圖片，輪詢停止
4.鼠標(biāo)移開索引，輪詢繼續(xù)
5.簡潔明了，輕量級（不依賴第三方任何文件，最好是原生js）

過程
找過很多圖片輪詢效果，和我的要求總是有些出入，不能十全十美。不是功能不全，就是太多花哨。本想自己開發(fā)一個，鑒于瑣事拖延，遲遲未能開始。
偶爾看到騰訊大粵網(wǎng) 的圖片新聞，感覺就是我所想要的效果。但仔細試驗，發(fā)現(xiàn)其不符合要求3。即沒有輪詢停止機制。想想還是自己改造一下，就和自己的要求差不多了。
思路：頁面加載，圖片開始輪詢。鼠標(biāo)移到索引，顯示相關(guān)圖片，清除輪詢。鼠標(biāo)移開索引，恢復(fù)輪詢。
定義一個全局的變量id，來記錄當(dāng)前激活的圖片索引id。每次輪轉(zhuǎn)時，更新這個id。鼠標(biāo)移開索引后，用這個id開始輪詢。

復(fù)制代碼代碼如下:

<html> 
<head> 
<link  rel="stylesheet" type="text/css"> 
<style> 
.turn 
{ 
height: 212px; 
float: left; 
overflow: hidden; 
position: relative; 
} 
.turn #adpica 
{ 
width: 382px; 
height: 210px; 
overflow: hidden; 
} 
.turn #adpica img 
{ 
width: 380px; 
height: 210px; 
float: left; 
overflow: hidden; 
} 
.turn #adtipa 
{ 
height: 16px; 
position: absolute; 
right: 8px; 
bottom: 8px; 
} 
.turn #adtipa ul li 
{ 
width: 19px; 
height: 19px; 
line-height: 19px; 
float: left; 
text-align: center; 
display: inline; 
margin: 0 1px; 
cursor: pointer; 
color: #fff; 
background: #000; 
} 
.turn #adtipa ul li.current 
{ 
color: #fff; 
background: #cc0000; 
} 
.turn .hidden 
{ 
display: none; 
} 
.turn .show 
{ 
display: block !important; 
} 
#adpica span 
{ 
position: absolute; 
bottom: 0; 
left: 0; 
color: #fff; 
font-size: 14px; 
height: 33px; 
width: 380px; 
filter: alpha(opacity=70); 
opacity: 0.7; 
background: #000; 
text-indent: -9999em; 
} 
#adpica p 
{ 
position: absolute; 
bottom: 0; 
left: 0; 
color: #fff; 
font-size: 14px; 
height: 33px; 
line-height: 33px; 
width: 285px; 
padding-left: 5px; 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<div class="focus"> 
<!--focus--> 
<div class="turn"> 
<div id="adpica"> 
<div class="show"> 
<a href="/a/20111119/000002.htm"> 
<img width="380" height="210" src="http://img1.gtimg.com/gd/pics/hv1/11/6/909/59109266.jpg"></a><span>焦點圖文字背景</span><p 
href="/a/20111119/000002.htm"> 
廣州花都拆違遭遇碎瓶煤氣罐</p> 
<!--[if !IE]>|xGv00|9f7171a0d436636945e9c21690c2ece8<![endif]--> 
</div> 
<div style="display: none;" class="hidden"> 
<a href="/a/20111119/000028.htm"> 
<img width="380" height="210" src="http://img1.gtimg.com/gd/pics/hv1/205/26/909/59114560.jpg"></a><span>焦點圖文字背景</span><p 
href="/a/20111119/000028.htm"> 
一顆“釘子”放棄工作保祖屋5年</p> 
<!--[if !IE]>|xGv00|d23979cbd54ef39a84fe343a81550dff<![endif]--> 
</div> 
<div class="hidden" style="display: none;"> 
<a href="/a/20111117/000250.htm"> 
<img width="380" height="210" src="http://img1.gtimg.com/gd/pics/hv1/68/53/908/59056283.jpg"></a><span>焦點圖文字背景</span><p 
href="/a/20111117/000250.htm"> 
爸爸，不要把我丟下</p> 
<!--[if !IE]>|xGv00|93b927379aeaca72b86d66dbb2e57614<![endif]--> 
</div> 
<div class="hidden" style="display: none;"> 
<a href="/a/20111119/000004.htm"> 
<img width="380" height="210" src="http://img1.gtimg.com/gd/pics/hv1/243/9/909/59110263.jpg"></a><span>焦點圖文字背景</span><p 
href="/a/20111119/000004.htm"> 
楊冪最新雜志寫真 魅惑優(yōu)雅</p> 
<!--[if !IE]>|xGv00|ca04e9980d08c91f55db9ea4ee64489c<![endif]--> 
</div> 
</div> 
<div id="adtipa"> 
<ul onmouseout="change()"> 
<li class="current" onmouseover="adchangea(1)">1 </li> 
<li class="" onmouseover="adchangea(2)">2 </li> 
<li class="" onmouseover="adchangea(3)">3 </li> 
<li class="" onmouseover="adchangea(4)">4</li></ul> 
</div> 
<script> 
//鼠標(biāo)移過來的動作。顯示當(dāng)前圖片，清除輪詢。 
function adchangea(adid) { 
dochange(adid); 
clearTimeout(adisround); 
} 
//自動輪詢 
function adchangea2(adid) { 
dochange(adid); 
var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); 
if ((adnext = adid + 1) > adbigimg.length) adnext = 1; 
adisround = setTimeout('adchangea2(' + adnext + ')', 3000); 
} 
//顯示當(dāng)前圖片 
function dochange(adid) { 
id = adid; 
var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); 
var adsmallimg = document.getElementById("adtipa").getElementsByTagName("li"); 
for (var adi = 0; adi < adbigimg.length; adi++) { 
adbigimg[adi].className = "hidden"; 
adsmallimg[adi].className = ""; 
} 
adbigimg[adid - 1].className = "show"; 
adsmallimg[adid - 1].className = "current"; 
} 
var adisround = setTimeout("adchangea2(2)", 3000); 
var id;//當(dāng)前激活id 
//鼠標(biāo)移開ul塊時，恢復(fù)輪詢 
function change() { 
adchangea2(id); 
} 
</script> 
</div> 
<!--[if !IE]>|xGv00|495624c0694083cdfaabbc0457f4f14e<![endif]--> 
<!--/focus--> 
</div> 
</body> 
</html>