js点击数字切换图片（JavaScript中输入数字转换图片（代码如下））

本文目录

• JavaScript中输入数字转换图片（代码如下）
• js如何点击左右按钮切换图片
• 在js单击不同的数字链接显示不同的图片
• JS图片切换带有数字 要JS
• JS实现点击一个按钮更换图片

JavaScript中输入数字转换图片（代码如下）

首先，changdu这个变量没有传递好，导致循环没有正常运行，实际中就执行了一遍而已。
其次，就算循环正常了，你的每次循环，都把sresult这个变量给清空一次。
所以你不能得到想要的结果。
还有，你写代码，不太规范啊，而且js有时不写结束符分号，这个也不是好习惯啊。

下面是参考代码：

《input type=“text“ id=“ShuRuNum“ /》
《button onclick=“Chenge();“》转换《/button》《br /》《br /》
《span id=“ShuChuPic“》《/span》

《script language=“javascript“》

function Chenge()
{
var shuzi=ShuRuNum.value;
var changdu=shuzi.length -1;
var sresult=““;
//alert(changdu);
for(i=0;i《=changdu;i++)
{
var inum;
inum=parseInt(ShuRuNum.value.charAt(i));
sresult=sresult+“《img src=./pic“+inum+“.jpg /》“;
ShuChuPic.innerHTML=sresult;
//alert(ShuRuNum.value);
}
}
《/script》

js如何点击左右按钮切换图片

这样：

《!DOCTYPE html》

《html》

《head》

《meta charset=“UTF-8“》

《title》动态切换图片《/title》

《/head》

《style》

ul{

padding:0;margin:0;

}

li{

list-style: none;

}

#pic{

position: relative;

width: 400px;

height: 400px;

background-color:red;

margin:100px auto;

background:url(’image/1.jpg’) no-repeat center;

}

#pic img{

width: 400px;

height: 400px;

}

#pic ul{

width: 50px;

position: absolute;

top: 0;

right: -70px;

}

li{

width: 40px;

height: 40px;

margin-bottom:10px;

background-color: pink;

float: left;

}

#pic span{ 

position: absolute;

bottom: 10px;

left: 0;

}

#pic p,#pic span{

width: 400px;

height: 20px;

}

#pic p{

position: absolute;

top: 10px;

left: 0;

}

.active{

background-color: red;

}

《/style》

《body》

《div id=“pic“》

《img src=““ alt=““》

《p》qwrwe《/p》

《span》werwer《/span》

《ul》

《/ul》

《/div》

《script》

window.onload=function(){

//存放旧li

var oldLi=null;

var num=0;

var oPic = document.getElementById(’pic’);

var oImg = oPic.getElementsByTagName(’img’);

var oUL =  oPic.getElementsByTagName(’ul’);

var oSpan= oPic.getElementsByTagName(’span’);

var oP = oPic.getElementsByTagName(’p’);

var oLi= oUL.getElementsByTagName(’li’);

var arr=[’image/1.jpg’,’image/2.jpg’,’image/3.jpg’,’image/4.jpg’];

var aText = [’图片1’,’图片2’,’图片3’,’图片4’];

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

//动态添加元素

oUL.innerHTML+=’《li》《/li》’;

}

// 旧li就等于当前的

oldLi=oLi[num];

// 初始化

oImg.src=arr[num];

oP.innerHTML=num+1+’/’+arr.length;

oSpan.innerHTML=aText[num];

oLi[num].className=’active’;

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

// 给元素自定义属性

// 

oLi[i].index=i;

oLi[i].onclick=function(){

// 当元素被点击时图片文字信息都一起变化

oImg.src=arr[this.index];

oP.innerHTML=1+this.index+’/’+arr.length;

oSpan.innerHTML=aText[this.index];

// 清空上一个 当前添加

oldLi.className=’’;

//将上一个给当前

oldLi=this;

this.className=’active’;

}

}

}

《/script》

《/body》

《/html》

扩展资料：

注意事项

1、可以通过JS删除和添加hidden属性，改用style.display=“none“和style.display=“inline“来实现隐藏和显示。

2、button属性，主要的问题时button样式的问题，如何才能做一个好看的button，通过查找找到了设置button相关的值。

border:none; 设置按钮无边框

outline:none;消除按钮点击后出现的表示被点击的边框

background：url(...)按钮背景图片

text-shadow: 0 1px 1px rgba(0,0,0,.3);文字阴影

box-shadow: 0 5px 7px rgba(0,0,0,.2);按钮阴影

border-radius:15px;按钮边框圆角

在js单击不同的数字链接显示不同的图片

可以写入超链接。
JS实现图片切换和数字随图片变换添加6个圆形数字超链接,鼠标移动到数字区域,切换到数字对应的图片。
超链接-当前表单对象对报表块和图表和js代码不同,根据需要使用对应的代码即可。

JS图片切换带有数字 要JS

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》
《title》图片切换练习《/title》

《style type=“text/css“》
a{
cursor:pointer;
}
《/style》
《div id=“userID“》
《script type=“text/javascript“》
var img1=“《img src=’images/1.jpg’ /》“;
var img2=“《img src=’images/2.jpg’ /》“;
var img3=“《img src=’images/3.jpg’ /》“;
var img4=“《img src=’images/4.jpg’ /》“;
var arrays=[img1,img2,img3,img4];
//document.writeln(arrays);
var i=0;
function picture(){
document.getElementById(“imgId“).innerHTML=arrays[i];
i++;
if(i==4)
{
i=0;
}
}
setInterval(“picture()“,2000);
//document.bgColor=“#46768“;
《/script》
《/div》
《/head》

《body》
《script type=“text/javascript“》
function out(i){
document.getElementById(“imgId“).innerHTML=arrays[i];
}
《/script》
《div style=“position:absolute;top:220px;left:180px“》
《a onclick=“out(0)“》 一 《/a》
《a onclick=“out(1)“》 二 《/a》
《a onclick=“out(2)“》 三 《/a》
《a onclick=“out(3)“》 四 《/a》
《/div》
《div id=“imgId“》“《img src=’images/1.jpg’ /》《/div》

《/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=“https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg“

/》

《/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 = “https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_400x400.jpg“

}

function sx() {

document.getElementById(’img1’).src = “https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_180x180.jpg“

}

function hy() {

document.getElementById(’img1’).src = “https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg“

}