投稿
  1. 簡單一點首頁
  2. 編程

js圖片切換代碼合集（javascript圖片切換代碼）

小藍 • • 編程

本文目錄一覽：

JS自動切換圖片代碼問題

js代碼如下，裡面有詳細解釋：

script type=”text/javascript”

/**

1. 圖片自動切換(更改img標籤src屬性)

a.製作一個切換函數

b.載入事件，完成間歇函數功能

2. 完成圖片停止功能

3. 如果滑鼠移出圖片，則間隙函數要調動起來

4. 圖片切換的時候對應的序號需要高亮顯示

5. 當滑鼠”移入”一個序號，則圖片要顯示對應序號的圖片

當前序號也需要被高亮顯示

序號有滑鼠移入事件

6. 滑鼠從序號移出要繼續圖片切換

*/

//圖片切換功能

var i = 1;

function pic_change(){

//圖片如果到達最後一個張，則計數器清空、歸位

i++;

if(i8){

i=1;

}

//全部序號”暗”下來

var lis = document.getElementsByTagName(‘li’);

for(var j=0; jlis.length; j++){

lis[j].style.background=”green”;

}

//當前序號背景色高亮顯示

document.getElementById(‘xu’+i).style.background=”yellow”;

var pic_obj = document.getElementById(‘pic’);

pic_obj.src=i+”.jpg”;

}

//載入事件函數，完成頁面每次載入間歇函數的製作

var timer = “”;

function jia(){

clearInterval(timer);

timer = setInterval(‘pic_change()’, 1000);

}

//停止圖片切換

function stop_pic(){

clearInterval(timer);

}

//滑鼠移入序號發生變化的函數

//1顯示當前序號對應圖片

//2當前序號高亮

//3滑鼠移出圖片要繼續切換

function xu_change(n){

//顯示圖片

document.getElementById(‘pic’).src=n+”.jpg”;

//立即停止間隙函數

stop_pic();

//序號背景色發生變化

//全部序號”暗”下來

var lis = document.getElementsByTagName(‘li’);

for(var j=0; jlis.length; j++){

lis[j].style.background=”green”;

}

//當前序號背景色高亮顯示

document.getElementById(‘xu’+n).style.background=”yellow”;

//讓圖片切換與當前序號一致 計數器與當前序號一致就可以

i=n;

}

/script

求一個圖片輪換JS效果代碼

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

html xmlns=””

head

style type=”text/css”

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

ul, li { list-style:none; }

#focus_change_btn .current { background:url() no-repeat 37px 8px;}

#focus_change_btn .current img { border-color:#EEE; }

#focus_change_btn li { display:inline; float:right; margin:0 10px; padding-top:12px; }

#focus_change_btn li img { width:20px; height:20px; border:2px solid #888; }

#abb { width:200px; height:200px;}

#abb li { display:inline; margin:40px 20px; }

#abb li img { width:200px; height:50px; border:0;}

/style

script type=”text/javascript”

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

/*位移演算法，參數分別是:ID名，水平位移，垂直位移，和延遲時間（就是漂移時間）；每次移動的距離加上一張圖片的width或者height就行。*/

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);//ceil(x)對x進行上舍入

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);

}

/*清除CSS，方便後面添加*/

function classNormal(){

var focusBtnList = $(‘focus_change_btn’).getElementsByTagName(‘li’);

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

focusBtnList[i].className=”;

}

}

/*修改下面的圖片順序*/

function changeAbb(i,j,k){

var abblist = $(‘abb’).getElementsByTagName(‘img’);

abblist[i].src=’images/t1.gif’;

abblist[j].src=’images/t2.gif’;

abblist[k].src=’images/t3.gif’;

}

/*給觸發按鈕添加事件*/

function focusChange() {

var focusBtnList = $(‘focus_change_btn’).getElementsByTagName(‘li’);

focusBtnList[0].onmouseover = function() {

moveElement(‘focus_change_list’,0,0,5);

classNormal();

focusBtnList[0].className=’current’;

changeAbb(0,1,2);

}

focusBtnList[1].onmouseover = function() {

moveElement(‘focus_change_list’,-250,0,5);

classNormal();

focusBtnList[1].className=’current’;

changeAbb(1,0,2);

}

focusBtnList[2].onmouseover = function() {

moveElement(‘focus_change_list’,-500,0,5);

classNormal()

focusBtnList[2].className=’current’;

changeAbb(1,2,0);

}

}

window.onload=function(){

focusChange();

}

/script

/head

body

div style=”width:410px;height:245px;position:relative;margin:0;padding:0; border:1px solid blue;”

div id=”focus_change” style=”position:relative; width:250px; height:245px; overflow:hidden; margin:0px 0px 0px 80px;”

div id=”focus_change_list” style=”top:0; left:0;position:absolute; width:760px; height:245px; “

ul

li style=”float:left;” img style=”width:250px; height:245px; border:none; ” src=””/ /li

li style=”float:left;”img style=”width:250px; height:245px; border:none; ” src=””/ /li

li style=”float:left;”img style=”width:250px; height:245px; border:none; ” src=””/ /li

/ul

/div

/div

div style=”position:absolute; width:410px; height:30px; top:200px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;”/div

div id=”focus_change_btn” style=”position:absolute; width:410px; height:60px; top:190px; left:0;”

ul style=”padding-left:5px;”

li class=”current”a href=”#”img src=”” alt=”” //a/li

lia href=”#”img src=”” alt=”” //a/li

lia href=”#”img src=”” alt=”” //a/li

/ul

/div

/div

div

ul id=”abb”

lia href=”#”img src=”” alt=”” //a/li

lia href=”#”img src=”” alt=”” //a/li

lia href=”#”img src=”” alt=”” //a/li

/ul

/div

/body

/html

/*樓主的圖片我看不清楚，我用百度中心的圖替代一下。CSS改成自己需要的，我中間加了個遮蔽層，樓主覺得不好看可以刪掉*/

圖片自動切換的JS代碼

試試這個圖片切換

有12345數字一起切換

滑鼠點一下數字會變換到另一張圖片，不點就會自動換

裡面有教程和源碼

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”

/* 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=”商業大亨” border=”0″ //a/li

lia href=”#” target=”_blank”img src=”/edu/img/js/200909/4.jpg” alt=”帝國遠征” border=”0″ //a/li

/ul

/div

div id=”ifocus_opdiv”/div

div id=”ifocus_tx”

ul

li class=”current”2008年度排名第一的網頁遊戲/li

li class=”normal”2009年最新的網頁遊戲 /li

li class=”normal”商業大亨，挑戰億萬富翁/li

li class=”normal”一款2009年不得不玩的帝國遠征/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

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

求純js 圖片切換代碼，最好帶注釋！

現在所有圖片都是放在images文件家裡的。

你的圖片要是不是放在images文件夾里的話，比如要放在tupian文件夾里，你就在dw里替換所有images字元為tupian，就能顯示小箭頭了啊

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”

!– saved from url=(0055) —

HTMLHEADTITLE無標題文檔/TITLE

META http-equiv=Content-Type content=”text/html; charset=gb2312″

STYLE type=text/cssBODY {

TEXT-ALIGN: center

}

TD {

FONT-SIZE: 12px

}

#textslide {

COLOR: #333333

}

/STYLE

META content=”MSHTML 6.00.6000.16825″ name=GENERATOR/HEAD

BODY

TABLE cellSpacing=0 cellPadding=0 width=325 border=0

TBODY

TR vAlign=top

TD colSpan=3A onmouseover=tu_ove() style=”CURSOR: hand”

onclick=gotoshow() onmouseout=ou()IMG height=190 src=”images/ad-01.jpg”

width=325 border=0 name=slide/A/TD/TR

TR

TD class=white align=middle width=229 bgColor=#f4f4f4 height=19/TD

TD width=1 bgColor=#7c7c7c

DIV style=”POSITION: relative”

DIV style=”POSITION: absolute; TOP: 10px”

TABLE cellSpacing=0 cellPadding=0 width=95 border=0

TBODY

TR vAlign=top align=middle

TD width=19 height=0

DIV style=”POSITION: relative”

DIV id=xiaotu1

style=”LEFT: 0px; POSITION: absolute; TOP: -19px”IMG id=xiaosan1

height=3 src=”images/bian1.gif” width=10 border=0/DIV/DIV/TD

TD width=19 height=0

DIV style=”POSITION: relative”

DIV id=xiaotu2

style=”LEFT: 0px; POSITION: absolute; TOP: -19px”IMG id=xiaosan2

height=3 src=”images/bian1.gif” width=10/DIV/DIV/TD

TD width=19 height=0

DIV style=”POSITION: relative”

DIV id=xiaotu3

style=”LEFT: 0px; POSITION: absolute; TOP: -19px”IMG id=xiaosan3

height=3 src=”images/bian1.gif” width=10/DIV/DIV/TD

TD width=19 height=0

DIV style=”POSITION: relative”

DIV id=xiaotu4

style=”LEFT: 0px; POSITION: absolute; TOP: -19px”IMG id=xiaosan4

height=3 src=”images/bian1.gif” width=10/DIV/DIV/TD

TD width=19 height=0

DIV style=”LEFT: 1px; POSITION: relative”

DIV id=xiaotu5

style=”LEFT: 0px; POSITION: absolute; TOP: -19px”IMG id=xiaosan5

height=3 src=”images/bian1.gif”

width=10/DIV/DIV/TD/TR/TBODY/TABLE/DIV/DIV/TD

TD width=95 height=19

TABLE cellSpacing=0 cellPadding=0 width=95 border=0

TBODY

TR vAlign=top

TD class=homejdboder width=19 height=19A onmouseover=ove(0)

style=”CURSOR: hand” onmouseout=ou()IMG height=19

src=”images/1.gif” width=19 border=0/A/TD

TD class=homejdboder width=19 height=19A onmouseover=ove(1)

style=”CURSOR: hand” onmouseout=ou()IMG height=19

src=”images/2.gif” width=19 border=0/A/TD

TD class=homejdboder width=19 height=19A onmouseover=ove(2)

style=”CURSOR: hand” onmouseout=ou()IMG height=19

src=”images/3.gif” width=19 border=0/A/TD

TD class=homejdboder width=19 height=19A onmouseover=ove(3)

style=”CURSOR: hand” onmouseout=ou()IMG height=19

src=”images/4.gif” width=19 border=0/A/TD

TD width=19 height=19A onmouseover=ove(4) style=”CURSOR: hand”

onmouseout=ou()IMG height=19 src=”images/5.gif” width=19

border=0/A/TD/TR/TBODY/TABLE/TD/TRtrtd colspan=”3″

DIV id=textslide焦點圖標題層/DIV/td/tr/TBODY/TABLE

SCRIPT

//slideimages數組為變換的圖

var slideimages=new Array();

slideimages[0]=”images/ad-01.jpg”;

slideimages[1]=”images/ad-02.jpg”;

slideimages[2]=”images/ad-03.jpg”;

slideimages[3]=”images/ad-04.jpg”;

slideimages[4]=”images/ad-05.jpg”;

//slidetext數組為變換的文字

var slidetext=new Array();

slidetext[0]=”焦點圖片廣告011111″;

slidetext[1]=”焦點圖片廣告022222″;

slidetext[2]=”焦點圖片廣告033333″;

slidetext[3]=”焦點圖片廣告044444″;

slidetext[4]=”焦點圖片廣告055555″;

//slidetext數組為點擊大圖後跳到的地址

var slidelinks=new Array();

slidelinks[0]=””;

slidelinks[1]=””;

slidelinks[2]=””;

slidelinks[3]=””;

slidelinks[4]=””;

//焦點圖初始內容－－start

var slidespeed=3000

var slidesanjiaoimages=new Array(“images/bian2.gif”,”images/bian1.gif”);

var slidesanjiaoimagesname=new Array(“xiaosan1″,”xiaosan2″,”xiaosan3″,”xiaosan4″,”xiaosan5”);

var filterArray=new Array();

filterArray[0]=”progid:DXImageTransform.Microsoft.Pixelate (enabled=false,duration=2,maxSquare=25 )”;

filterArray[1]=”progid:DXImageTransform.Microsoft.Stretch (duration=1,stretchStyle=PUSH)”;

filterArray[2]=”progid:DXImageTransform.Microsoft.Stretch(duration=1)”;

filterArray[3]=”progid:DXImageTransform.Microsoft.Slide(bands=8, duration=1)”;

filterArray[4]=”progid:DXImageTransform.Microsoft.Fade ( duration=1,overlap=0.25 )”;

var imageholder=new Array()

var ie55=window.createPopup

for (i=0;islideimages.length;i++){

imageholder[i]=new Image()

imageholder[i].src=slideimages[i]

}

function tu_ove(){clearTimeout(setID)}

function ou(){slideit()}

var whichlink=0

var whichimage=0

function gotoshow(){

window.open(slidelinks[whichlink]);

}

function slideit(){

document.images.slide.style.filter=filterArray[whichimage];

//alert(document.images.slide.style.filter);

pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000) : 0

//alert(pixeldelay);

if (!document.images) return

if (ie55) {

document.images.slide.filters[0].apply();

document.images.slide.filters[0].play();

}

document.images.slide.src=imageholder[whichimage].src

document.getElementById(“textslide”).innerText=slidetext[whichimage];

document.getElementById(“xiaosan1”).src=slidesanjiaoimages[0];

document.getElementById(“xiaosan2”).src=slidesanjiaoimages[0];

document.getElementById(“xiaosan3”).src=slidesanjiaoimages[0];

document.getElementById(“xiaosan4”).src=slidesanjiaoimages[0];

document.getElementById(“xiaosan5”).src=slidesanjiaoimages[0];

document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];

if (ie55) document.images.slide.filters[0].play()

whichlink=whichimage

whichimage=(whichimageslideimages.length-1)? whichimage+1 : 0

setID=setTimeout(“slideit()”,slidespeed+pixeldelay)

}

slideit()

function ove(n){

clearTimeout(setID)

whichimage=n;

document.images.slide.src=imageholder[whichimage].src

document.getElementById(“textslide”).innerText=slidetext[whichimage];

document.getElementById(“xiaosan1”).src=slidesanjiaoimages[0];

document.getElementById(“xiaosan2”).src=slidesanjiaoimages[0];

document.getElementById(“xiaosan3”).src=slidesanjiaoimages[0];

document.getElementById(“xiaosan4”).src=slidesanjiaoimages[0];

document.getElementById(“xiaosan5”).src=slidesanjiaoimages[0];

document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];

}

/SCRIPT

/BODY/HTML

JS實現點擊一個按鈕更換圖片

你的代碼差在少了”選擇元素”這一步。

img1.src = “..\images/DT2.JPG”這一步是沒有作用的，因為img1你還沒有定義。

正確的方法是讓圖片元素的id是img1，然後

document.getElementById(‘img1’).src = “..\images/DT2.JPG”

這樣進行賦值。

document.getElementById(‘img1’)這一步的作用就是選擇圖片元素。

這是針對此問題的測試頁面

代碼如下

div class=”DT”

div

img id=”img1″ src=””

/

/div

/div

div style=”text-align:center”

input type=”button” id=”b1″ value=” 放大 ” onclick=”fd();” /

input type=”button” id=”b3″ value=”還原 ” onclick=”hy();” /

input type=”button” id=”b2″ value=” 縮小 ” onclick=”sx();” /

/div

function fd() {

document.getElementById(‘img1’).src = “”

}

function sx() {

document.getElementById(‘img1’).src = “”

}

function hy() {

document.getElementById(‘img1’).src = “”

}

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/283135.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
0 0
上一篇 2024-12-22 08:07
下一篇 2024-12-22 08:07

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性，它可以代理一個數組，監聽數據變化並進行攔截、處理。在實際開發中，使用Proxy(array)可以方便地實現數據的監…

    CUGEL的頭像 CUGEL
    編程 2025-04-29

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    GPYNH的頭像 GPYNH
    編程 2025-04-29

  • Python字元串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字元串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字元串寬度不限制的情況下，我們可以寫出很長很長的一行代碼。但是，為了…

    OQFRU的頭像 OQFRU
    編程 2025-04-29

  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述，力求讓讀者深刻理解Python基礎代碼。通過本文的學習，相信大家對Python的學習和應用會更加輕鬆和高效。 一、變數和數…

    BFAIW的頭像 BFAIW
    編程 2025-04-29

  • 用Python繪製酷炫圖片

    在本篇文章中，我們將展示如何使用Python繪製酷炫的圖片。 一、安裝Python繪圖庫 在使用Python繪製圖片之前，我們需要先安裝Python繪圖庫。Python有很多繪圖庫…

    APYSJ的頭像 APYSJ
    編程 2025-04-29

  • Python滿天星代碼：讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼，為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員，都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    DCQKT的頭像 DCQKT
    編程 2025-04-29

  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在著手設計之前，我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面： 1、庫存管…

    EKUXU的頭像 EKUXU
    編程 2025-04-29

  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面，為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手，選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    DIYUZ的頭像 DIYUZ
    編程 2025-04-29

  • Python實現簡易心形代碼

    在這個文章中，我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹，逐步深入了解如何實現這一任務。 一、安裝Python …

    DKZPU的頭像 DKZPU
    編程 2025-04-29

  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中，我們不可避免地需要編寫一些長段代碼，包括函數、類、複雜的控制語句等等。在編寫這些代碼時，我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    SSLAV的頭像 SSLAV
    編程 2025-04-29

發表回復

登錄後才能評論