怎么用js设置img标记的src

JavaScript011

怎么用js设置img标记的src,第1张

用setAtrribute()方法

举个例子

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

<img src="1.jpg" alt="">

  <script>

  //获取到图片标签标签

  var img = document.getElementsByTagName("img")[0]

  //设置图片路径

  img.setAttribute("src","2.jpg")

  </script>

</body>

</html>

显示标记标签。将文本、时间等字段拖入维度栏,将数值拖入左值轴和右值轴,设置好标签和显示,在柱状图上午显示数据标签,只需要将标签设置为“显示标记标签”,在js中用显示标记标签将柱状统计图上的分类显示从上方移到下方。JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

<style type="text/css">

.axx{padding:1px 7pxborder-left:#cccccc 1px solidfont-size:12px}

a.axx:link,a.axx:visited{text-decoration:nonecolor:#fffline-height:12pxfont:9px sans-serifbackground-color:#666}

a.axx:active,a.axx:hover{text-decoration:nonecolor:#fffline-height:12pxfont:9px sans-serifbackground-color:#999}

.bxx{padding:1px 7pxborder-left:#cccccc 1px solid}

a.bxx:link,a.bxx:visited{text-decoration:nonecolor:#fffline-height:12pxfont:9px sans-serifbackground-color:#009900}

a.bxx:active,a.bxx:hover{text-decoration:nonecolor:#fffline-height:12pxfont:9px sans-serifbackground-color:#ff9900}

</style>

<SCRIPT>

var i=1//当前所显示的滚动图

var tt//时间标识

var key=0

var str=['我爱张娜拉','中国人就要对日本人狠点','忍者','winXP']//图片关联title 文字

var url=['http://www.sina.com','http://www.google.cn','http://www.sohu.com','http://www.baidu.com'] //图片关联连接

function changeImg() //自动循环方法

{

if(key==0){key=1} //如果第一次执行KEY=1,表示已经执行过一次了。

else

{

document.getElementById("pic").filters[0].Apply()//将滤镜应用到对像上

document.getElementById("pic").filters[0].Play(duration=2)//开始转换

document.getElementById("pic").filters[0].Transition=23//转换效果

}

document.getElementById("pic").src=i+".jpg"//获得当前图片地址

document.getElementById("title").value=str[i-1]

document.getElementById("url").href=url[i-1]

for (var j=1j<=4j++){

document.getElementById("pic"+j).className='axx'} //将下面黑条上的所有链接变为未选中状态

document.getElementById("pic"+i).className='bxx'//将当前页面的ID设置为选中状态

i++//每次累计加1

if(i==5){i=1} //如果ID大于总图片数量。则从头开始循环

tt=setTimeout('changeImg()',4000)

}

function clickchange(id) //点击黑条上的链接执行的方法

{

i=id//当前页面的ID等于传入的N值,

window.clearTimeout(tt)//清除用于循环的TT

changeImg()//重新执行change_img()但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.

}

window.onload=changeImg//载入自动执行

</SCRIPT>

</head>

<body>

<!--整体外层 -->

<div align=center style="width:242px">

<!--图片+过渡外层 注:"overflow:hidden 超出隐藏"-->

<!--注:"overflow:hidden 超出隐藏" text-overflow:clip 不显示省略标记(...),而是简单的裁切-->

<div style="width:242pxheight:320pxoverflow:hiddentext-overflow:clipfloat:left">

<!--图片层 -->

<!--filter : progid 滤镜效果 Duration的值为网页动态过渡的时间,单位为秒。Transition是过渡方式,它的值为0到23,分别对应24种过渡方式 -->

<div><a id="url" target="_blank"><img id="pic" style="border:1px #cbcbcb solidFILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23)" width=240 height=320 /></a></div>

<!--过渡+按钮外层 -->

<!-- Alpha"属性是把一个目标元素与背景混合 opacity :透明度。默认的范围是从0 到 100 finishopacity: 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度 style 指定透明区域的形状特征:1 代表线形

margin:1px 设置边际属性-->

<div style="filter:alpha(style=1,opacity=10,finishOpacity=90)background: #888888width:100%-2pxtext-align:righttop:-16pxposition:relativemargin:1pxheight:14pxborder:0pxpadding-top:1pxz-index:4">

<!--按钮层 -->

<div id="picid"><a href="javascript:clickchange(1)" id="pic1" class="axx" target="_self">1</a><a href="javascript:clickchange(2)" id="pic2" class="axx" target="_self">2</a><a href="javascript:clickchange(3)" id="pic3" class="axx" target="_self">3</a><a href="javascript:clickchange(4)" id="pic4" class="axx" target="_self">4</a></div></div></div>

<!--下面文字层 -->

<div align=center><input id="title" type="txt" style="height:15pxbackground-color:#f2f6fbborder:0px solid #f2f6fbwidth:242pxcolor:#ff8800font-size:9ptposition:relativepadding-top:1pxtext-align:center"></div>

</div>