網易新聞的首頁特效很好看，上個星期做網頁專題寫了個特效結果不理想，今天上午就想模仿網易新聞的效果，下午開始動手到晚上終於搞定了。
實現效果：
1、正常情況下，圖片和文字內容輪動；可以修改ContentN.Html(N=1~6)文件裏面的內容；
2、鼠標移入大圖，輪動停止，可以點擊向左或者向右進行瀏覽，也可以點擊具體的小圖片進行瀏覽；
3、小圖片和左右按鈕式半透明，可以隨意設置焦點的圖片樣式；
4、可以隨意將效果移置到其他網頁中。
下面是代碼：
實現效果：
1、正常情況下，圖片和文字內容輪動；可以修改ContentN.Html(N=1~6)文件裏面的內容；
2、鼠標移入大圖，輪動停止，可以點擊向左或者向右進行瀏覽，也可以點擊具體的小圖片進行瀏覽；
3、小圖片和左右按鈕式半透明，可以隨意設置焦點的圖片樣式；
4、可以隨意將效果移置到其他網頁中。
下面是代碼：
<html>
<head><title>仿網易首頁的動畫</title>
<style type=text/css>
body {text-align:center;
topmargin:0;
leftmargin:0;
background:yellow;}
#dawn0919 {position:relative;
text-align:center;
topmargin:0;
leftmargin:0;
red;
width:1024;
height:500;
border:0;
overflow:hidden;
z-index:1;}
#dawn0718 {position:absolute;
left:464;
top:0;
text-align:center;
topmargin:0;
leftmargin:0;
width:560px;
height:280px;
border:0;
blue;
overflow:hidden;
z-index:2}
<head><title>仿網易首頁的動畫</title>
<style type=text/css>
body {text-align:center;
topmargin:0;
leftmargin:0;
background:yellow;}
#dawn0919 {position:relative;
text-align:center;
topmargin:0;
leftmargin:0;
red;
width:1024;
height:500;
border:0;
overflow:hidden;
z-index:1;}
#dawn0718 {position:absolute;
left:464;
top:0;
text-align:center;
topmargin:0;
leftmargin:0;
width:560px;
height:280px;
border:0;
blue;
overflow:hidden;
z-index:2}
#Content0 {position:absolute;
left:0;
z-index:3
}
#Content1 {position:absolute;
left:560;
z-index:4
}
#Content2 {position:absolute;
left:1120;
z-index:5
}
#Content3 {position:absolute;
left:1680;
z-index:6
}
#Content4 {position:absolute;
left:2240;
z-index:7
}
#Content5 {position:absolute;
left:2800;
z-index:8
}
left:0;
z-index:3
}
#Content1 {position:absolute;
left:560;
z-index:4
}
#Content2 {position:absolute;
left:1120;
z-index:5
}
#Content3 {position:absolute;
left:1680;
z-index:6
}
#Content4 {position:absolute;
left:2240;
z-index:7
}
#Content5 {position:absolute;
left:2800;
z-index:8
}
#MidBtn {position:absolute;
width:400;
height:50;
top:108;
left:0;
z-index:718;
filter:alpha(opacity=70);
}
#LeftBtn {position:absolute;
top:0;
left:18;
z-index:719;
filter:alpha(opacity=60);
}
width:400;
height:50;
top:108;
left:0;
z-index:718;
filter:alpha(opacity=70);
}
#LeftBtn {position:absolute;
top:0;
left:18;
z-index:719;
filter:alpha(opacity=60);
}
#RightBtn {position:absolute;
top:0;
left:342;
z-index:780;
}
top:0;
left:342;
z-index:780;
}
#BottomPicBtn {position:absolute;
width:400;
height:50;
top:228;
left:0;
z-index:9999;
filter:alpha(opacity=70);
}
#SmallPic0 {position:absolute;
width:59;
height:42;
top:2;
Left:12;
border-width:0;
margin:2px 2px auto;
}
#SmallPic1 {position:absolute;
width:59;
height:42;
top:2;
Left:76;
border-width:0;
margin:2px 2px auto;
}
#SmallPic2 {position:absolute;
width:59;
height:42;
top:2;
Left:140;
border-width:0;
margin:2px 2px auto;
}
#SmallPic3 {position:absolute;
width:59;
height:42;
top:2;
Left:204;
border-width:0;
margin:2px 2px auto;
}
#SmallPic4 {position:absolute;
width:59;
height:42;
top:2;
Left:268;
border-width:0;
margin:2px 2px auto;
}
#SmallPic5 {position:absolute;
width:59;
height:42;
top:2;
Left:332;
border-width:0;
margin:2px 2px auto;
}
.PicFocus {position:absolute;
margin:2px 2px 2px 2px;
border-width:4;
border-style:solid;
border-color:white;
background:white;
}
</style>
width:400;
height:50;
top:228;
left:0;
z-index:9999;
filter:alpha(opacity=70);
}
#SmallPic0 {position:absolute;
width:59;
height:42;
top:2;
Left:12;
border-width:0;
margin:2px 2px auto;
}
#SmallPic1 {position:absolute;
width:59;
height:42;
top:2;
Left:76;
border-width:0;
margin:2px 2px auto;
}
#SmallPic2 {position:absolute;
width:59;
height:42;
top:2;
Left:140;
border-width:0;
margin:2px 2px auto;
}
#SmallPic3 {position:absolute;
width:59;
height:42;
top:2;
Left:204;
border-width:0;
margin:2px 2px auto;
}
#SmallPic4 {position:absolute;
width:59;
height:42;
top:2;
Left:268;
border-width:0;
margin:2px 2px auto;
}
#SmallPic5 {position:absolute;
width:59;
height:42;
top:2;
Left:332;
border-width:0;
margin:2px 2px auto;
}
.PicFocus {position:absolute;
margin:2px 2px 2px 2px;
border-width:4;
border-style:solid;
border-color:white;
background:white;
}
</style>
<script language=javascript type=text/javascript>
var ScrollStr;
var ScrollWidth=560;
var ScrollNumBers=6;
var TimerID;
var ActionFlag=0;
var ScrollWidth=560;
var ScrollNumBers=6;
var TimerID;
var ActionFlag=0;
function init(){
ScrollStr="012345";
ReadyDiv();
HideBottomPicBtn();
}
ScrollStr="012345";
ReadyDiv();
HideBottomPicBtn();
}
function ReadyDiv(){
for(var i=0;i<ScrollNumBers;i++){
var DivTemp=document.getElementById("Content"+ScrollStr.substring(i,i+1)).style;
DivTemp.xpos=(i - 1)*ScrollWidth;
DivTemp.left=DivTemp.xpos+'px';
document.getElementById("SmallPic"+i).className="SmallPic"+i.toString();
}
document.getElementById("SmallPic"+ScrollStr.substring(1,2)).className="PicFocus";
}
for(var i=0;i<ScrollNumBers;i++){
var DivTemp=document.getElementById("Content"+ScrollStr.substring(i,i+1)).style;
DivTemp.xpos=(i - 1)*ScrollWidth;
DivTemp.left=DivTemp.xpos+'px';
document.getElementById("SmallPic"+i).className="SmallPic"+i.toString();
}
document.getElementById("SmallPic"+ScrollStr.substring(1,2)).className="PicFocus";
}
function ScrollPicToLeft(){
ScrollStr=ScrollStr.substring(1,ScrollNumBers)+ScrollStr.substring(0,1);
ReadyDiv();
}
ScrollStr=ScrollStr.substring(1,ScrollNumBers)+ScrollStr.substring(0,1);
ReadyDiv();
}
function ScrollPicToRight(){
ScrollStr=ScrollStr.substring(ScrollNumBers - 1,ScrollNumBers)+ScrollStr.substring(0,ScrollNumBers - 1);
ReadyDiv();
}
ScrollStr=ScrollStr.substring(ScrollNumBers - 1,ScrollNumBers)+ScrollStr.substring(0,ScrollNumBers - 1);
ReadyDiv();
}
function ShowBottomPicBtn() {
StopSwith();
var PspMidBtn=document.getElementById("MidBtn");
PspMidBtn.style.visibility="visible";
StopSwith();
var PspMidBtn=document.getElementById("MidBtn");
PspMidBtn.style.visibility="visible";
var PspBottomPicBtn=document.getElementById("BottomPicBtn");
PspBottomPicBtn.style.visibility="visible";
}
PspBottomPicBtn.style.visibility="visible";
}
function HideBottomPicBtn() {
var PspMidBtn=document.getElementById("MidBtn");
PspMidBtn.style.visibility="hidden";
var PspMidBtn=document.getElementById("MidBtn");
PspMidBtn.style.visibility="hidden";
var PspBottomPicBtn=document.getElementById("BottomPicBtn");
PspBottomPicBtn.style.visibility="hidden";
TimerStart();
}
PspBottomPicBtn.style.visibility="hidden";
TimerStart();
}
function ScrollToPic(StrPicID){
var IFind=ScrollStr.indexOf(StrPicID);
ScrollStr=ScrollStr.substring(IFind,ScrollNumBers)+ScrollStr.substring(0,IFind);
ScrollPicToRight();
ReadyDiv();
}
var IFind=ScrollStr.indexOf(StrPicID);
ScrollStr=ScrollStr.substring(IFind,ScrollNumBers)+ScrollStr.substring(0,IFind);
ScrollPicToRight();
ReadyDiv();
}
function TimerStart(){ if ( ActionFlag==0 ) {
ActionFlag=1;
TimerID=window.setInterval(ScrollPicToLeft,3000);}
}
function StopSwith(){ ActionFlag=0;
window.clearInterval(TimerID);
}
window.
init();
TimerStart();
}
</script>
ActionFlag=1;
TimerID=window.setInterval(ScrollPicToLeft,3000);}
}
function StopSwith(){ ActionFlag=0;
window.clearInterval(TimerID);
}
window.
init();
TimerStart();
}
</script>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div id=dawn0919>
<div id=dawn0718 onMouseOut="HideBottomPicBtn()" onMouseOver="ShowBottomPicBtn()">
<div ID=One>
<iframe id="Content0" src="html/Content1.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
</div>
<div ID=Two>
<iframe id="Content1" src="html/Content2.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
</div>
<div ID=Three>
<iframe id="Content2" src="html/Content3.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
</div>
<div ID=Four>
<iframe id="Content3" src="html/Content4.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
</div>
<div ID=Five>
<iframe id="Content4" src="html/Content5.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
</div>
<div ID=Six>
<iframe id="Content5" src="html/Content6.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
</div>
<div ID=MidBtn>
<img src="pic/LeftBtn.jpg" id=LeftBtn onMouseDown="ScrollPicToLeft()" onMouseUp="void(null)" onMouseOut="void(null)" />
<img src="pic/RightBtn.jpg" id=RightBtn onMouseDown="ScrollPicToRight()" onMouseUp="void(null)" onMouseOut="void(null)"
/>
</div>
<div ID=BottomPicBtn>
<div class=PicFocus ID=SmallPic0 ><img src="pic/1_0.jpg" onMouseDown="ScrollToPic('0')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic1 ><img src="pic/2_0.jpg" onMouseDown="ScrollToPic('1')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic2 ><img src="pic/3_0.jpg" onMouseDown="ScrollToPic('2')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic3 ><img src="pic/4_0.jpg" onMouseDown="ScrollToPic('3')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic4 ><img src="pic/5_0.jpg" onMouseDown="ScrollToPic('4')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic5 ><img src="pic/6_0.jpg" onMouseDown="ScrollToPic('5')" onMouseOut="void(null)" /></div>
</div>
</div>
</div>
</body>
</html>
</div>
<div ID=BottomPicBtn>
<div class=PicFocus ID=SmallPic0 ><img src="pic/1_0.jpg" onMouseDown="ScrollToPic('0')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic1 ><img src="pic/2_0.jpg" onMouseDown="ScrollToPic('1')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic2 ><img src="pic/3_0.jpg" onMouseDown="ScrollToPic('2')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic3 ><img src="pic/4_0.jpg" onMouseDown="ScrollToPic('3')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic4 ><img src="pic/5_0.jpg" onMouseDown="ScrollToPic('4')" onMouseOut="void(null)" /></div>
<div class=PicFocus ID=SmallPic5 ><img src="pic/6_0.jpg" onMouseDown="ScrollToPic('5')" onMouseOut="void(null)" /></div>
</div>
</div>
</div>
</body>
</html>
效果圖：
