JavaScript 的網(wǎng)頁圖片切換代碼

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

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、建水網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為建水等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title網(wǎng)頁特效 首頁圖片切換/title

style type="text/css"

/* Reset style */

* { margin:0; padding:0; word-break:break-all; }

body {

background:#fff;

color:#000000;

font:12px/1.6em Helvetica, Arial, sans-serif;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#0287CA; text-decoration:none; }

a:hover { text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

legend { display:none; }

em, strong, cite, th { font-style:normal; font-weight:normal; }

input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }

table { border-collapse:collapse; }

html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/

/* iFocus style */

#ifocus { width:650px; height:245px; margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }

#ifocus_pic { display:inline; position:relative; float:left; width:540px; height:225px; overflow:hidden; margin:10px 0 0 10px; }

#ifocus_piclist { position:absolute; }

#ifocus_piclist li { width:550px; height:225px; overflow:hidden; }

#ifocus_piclist img { width:550px; height:225px; }

#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }

#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }

#ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }

#ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }

#ifocus_tx .normal { display:none; }

/style

script type="text/javascript"

function $(id) { return document.getElementById(id); }

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

}

}

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x ypos == final_y) {

return true;

}

if (xpos final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if (xpos final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function classNormal(iFocusBtnID,iFocusTxID){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

for(var i=0; iiFocusBtns.length; i++) {

iFocusBtns[i].className='normal';

iFocusTxs[i].className='normal';

}

}

function classCurrent(iFocusBtnID,iFocusTxID,n){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

iFocusBtns[n].className='current';

iFocusTxs[n].className='current';

}

function iFocusChange() {

if(!$('ifocus')) return false;

$('ifocus').onmouseover = function(){atuokey = true};

$('ifocus').onmouseout = function(){atuokey = false};

var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');

var listLength = iFocusBtns.length;

iFocusBtns[0].onmouseover = function() {

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (listLength=2) {

iFocusBtns[1].onmouseover = function() {

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

}

if (listLength=3) {

iFocusBtns[2].onmouseover = function() {

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

}

if (listLength=4) {

iFocusBtns[3].onmouseover = function() {

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

}

}

setInterval('autoiFocus()',3500);

var atuokey = false;

function autoiFocus() {

if(!$('ifocus')) return false;

if(atuokey) return false;

var focusBtnList = $('ifocus_btn').getElementsByTagName('li');

var listLength = focusBtnList.length;

for(var i=0; ilistLength; i++) {

if (focusBtnList[i].className == 'current') var currentNum = i;

}

if (currentNum==0listLength!=1 ){

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

if (currentNum==1listLength!=2 ){

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

if (currentNum==2listLength!=3 ){

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

if (currentNum==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==1listLength==2 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==2listLength==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

}

addLoadEvent(iFocusChange);

/script

/head

body

br /

div align="center"

div id="ifocus"

div id="ifocus_pic"

div id="ifocus_piclist" style="left:0; top:0;"

ul

lia href="#" target="_blank"img src="/edu/img/js/200909/1.jpg" alt="武林三國" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/2.jpg" alt="武林英雄" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/3.jpg" alt="商業(yè)大亨" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/4.jpg" alt="帝國遠(yuǎn)征" border="0" //a/li

/ul

/div

div id="ifocus_opdiv"/div

div id="ifocus_tx"

ul

li class="current"2008年度排名第一的網(wǎng)頁游戲/li

li class="normal"2009年最新的網(wǎng)頁游戲 /li

li class="normal"商業(yè)大亨，挑戰(zhàn)億萬富翁/li

li class="normal"一款2009年不得不玩的帝國遠(yuǎn)征/li

/ul

/div

/div

div id="ifocus_btn"

ul

li class="current"img src="/edu/img/js/200909/s1.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s2.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s3.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s4.jpg" alt="" //li

/ul

/div

/div

/div

/body

/html

自己改圖片鏈接和大小~~

有什么好的學(xué)習(xí)javascript的網(wǎng)站

基礎(chǔ)性的學(xué)習(xí)網(wǎng)站：

w3school：

w3cplus：

菜鳥教程網(wǎng)：

易百教程：

腳本之家：

視頻類的學(xué)習(xí)網(wǎng)站：

尚學(xué)堂：

慕課網(wǎng)：

扣丁課堂：

極客學(xué)院：

個(gè)人博客類的學(xué)習(xí)網(wǎng)站：

張鑫旭：

阮一峰：

廖雪峰：

辰辰：

軒楓閣：

社區(qū)類的學(xué)習(xí)網(wǎng)站：

segmentfault：

掘金：

簡書：

Stack Overflow:

CSDN：

博客園：

希望對你有幫助！

那里可以找到制作網(wǎng)頁的過程

關(guān)于網(wǎng)頁制作的教程和實(shí)例很多，不知道這位兄弟需要學(xué)習(xí)哪方面的，想從哪方面發(fā)展。

從的來說，如今網(wǎng)頁設(shè)計(jì)有“軟件設(shè)計(jì)”（多為靜態(tài)）和“網(wǎng)絡(luò)編程”（動態(tài)）兩大方向。軟件方面相對簡單一點(diǎn)，有“所見即所得”的特點(diǎn)，你不必懂任何語言或著代碼，只要利用軟件自身所帶的強(qiáng)大功能，即可制作出內(nèi)容豐富的網(wǎng)頁，甚至是網(wǎng)站來。

網(wǎng)頁設(shè)計(jì)，軟件方面常用的軟件有FrontPage、三劍客（Dreamweaver、Fireworks、flash）等。編程方面常用ASP。另外，做為超文本標(biāo)志（標(biāo)記）語言的HTML，對于初學(xué)者也很重要。HTML并不是嚴(yán)格意義上的程序語言，基本上只要懂HTML各標(biāo)記的含義，就懂了HTML，但是不管是對于傳統(tǒng)的靜態(tài)網(wǎng)頁，還是對于ASP類的動態(tài)網(wǎng)頁，HTML都至關(guān)重要。

另外，現(xiàn)在多數(shù)網(wǎng)頁設(shè)計(jì)愛好者，在最初接觸或?qū)W習(xí)編程的時(shí)候，都常用別人的源碼來修改、學(xué)習(xí)。這也是一種很好的學(xué)習(xí)方法。

在這里想強(qiáng)調(diào)一點(diǎn)是，我目前也只是一個(gè)愛好者，之所以還羅嗦了這么多，一是是不知道你現(xiàn)在處于一個(gè)什么樣的階段，一是想讓你少走些彎路。

最后，介紹你幾個(gè)經(jīng)典的站點(diǎn)。

站長學(xué)習(xí)站：

1、中國站長站站長學(xué)院：

網(wǎng)頁特效站：

1、網(wǎng)頁特效集錦：

2、javascript網(wǎng)頁特效：

源碼站：

1、源碼之家：

2、ASP300：

3、搜源碼：

4、源碼網(wǎng)：

5、中國源碼：

綜合站：

1、中國站長站：

2、中國建站專家：

3、網(wǎng)頁制作大寶庫：

以上是我簡單整理后的網(wǎng)頁設(shè)計(jì)相關(guān)站點(diǎn)，需要對你有所幫助，以后我有時(shí)間會繼續(xù)整理的。至于你需要的網(wǎng)頁制作的教程，網(wǎng)上很多，現(xiàn)提供網(wǎng)頁制作大寶庫的給你。

從源碼之家下載的圖片效果，解壓出來有images js css 文件夾 還有一個(gè)intex.html 文件，請問如果用DW插入

你打開DW軟件，頂部文件--打開，找到你下載的文件夾，點(diǎn)擊就可以插入了。

當(dāng)前文章：源碼之家javascript,源碼之家下載
轉(zhuǎn)載注明：http://chinadenli.net/article9/dseipoh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、、品牌網(wǎng)站制作、建站公司、微信小程序、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)