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/n/283135.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
小蓝小蓝
0
上一篇 2024-12-22 08:07
下一篇 2024-12-22 08:07

相关推荐

  • JS Proxy(array)用法介绍

    JS Proxy(array)可以说是ES6中非常重要的一个特性，它可以代理一个数组，监听数据变化并进行拦截、处理。在实际开发中，使用Proxy(array)可以方便地实现数据的监…

    编程 2025-04-29

  • Python周杰伦代码用法介绍

    本文将从多个方面对Python周杰伦代码进行详细的阐述。 一、代码介绍 from urllib.request import urlopen from bs4 import Bea…

    编程 2025-04-29

  • Python字符串宽度不限制怎么打代码

    本文将为大家详细介绍Python字符串宽度不限制时如何打代码的几个方面。 一、保持代码风格的统一 在Python字符串宽度不限制的情况下，我们可以写出很长很长的一行代码。但是，为了…

    编程 2025-04-29

  • Python基础代码用法介绍

    本文将从多个方面对Python基础代码进行解析和详细阐述，力求让读者深刻理解Python基础代码。通过本文的学习，相信大家对Python的学习和应用会更加轻松和高效。 一、变量和数…

    编程 2025-04-29

  • 用Python绘制酷炫图片

    在本篇文章中，我们将展示如何使用Python绘制酷炫的图片。 一、安装Python绘图库 在使用Python绘制图片之前，我们需要先安装Python绘图库。Python有很多绘图库…

    编程 2025-04-29

  • Python满天星代码：让编程变得更加简单

    本文将从多个方面详细阐述Python满天星代码，为大家介绍它的优点以及如何在编程中使用。无论是刚刚接触编程还是资深程序员，都能从中获得一定的收获。 一、简介 Python满天星代码…

    编程 2025-04-29

  • 仓库管理系统代码设计Python

    这篇文章将详细探讨如何设计一个基于Python的仓库管理系统。 一、基本需求 在着手设计之前，我们首先需要确定仓库管理系统的基本需求。 我们可以将需求分为以下几个方面： 1、库存管…

    编程 2025-04-29

  • 写代码新手教程

    本文将从语言选择、学习方法、编码规范以及常见问题解答等多个方面，为编程新手提供实用、简明的教程。 一、语言选择 作为编程新手，选择一门编程语言是很关键的一步。以下是几个有代表性的编…

    编程 2025-04-29

  • Python实现简易心形代码

    在这个文章中，我们将会介绍如何用Python语言编写一个非常简单的代码来生成一个心形图案。我们将会从安装Python开始介绍，逐步深入了解如何实现这一任务。 一、安装Python …

    编程 2025-04-29

  • 怎么写不影响Python运行的长段代码

    在Python编程的过程中，我们不可避免地需要编写一些长段代码，包括函数、类、复杂的控制语句等等。在编写这些代码时，我们需要考虑代码可读性、易用性以及对Python运行性能的影响。…

    编程 2025-04-29

发表回复

登录后才能评论