JS实现点击一个按钮更换图片

2023-03-05 16:02:02JavaScript012

JS实现点击一个按钮更换图片,第1张

你的代码差在少了"选择元素"这一步。

img1.src = "..\images/DT2.JPG"这一步是没有作用的，因为img1你还没有定义。

正确的方法是让图片元素的id是img1，然后

document.getElementById('img1').src = "..\images/DT2.JPG"

这样进行赋值。

document.getElementById('img1')这一步的作用就是选择图片元素。

这是针对此问题的测试页面

代码如下

<div>

<img id="img1" src="https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"

</div>

</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"

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>网页特效首页图片切换</title>

/* Reset style */

* { margin:0padding:0word-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:#0287CAtext-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:normalfont-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:650pxheight:245pxmargin:0pxborder:1px solid #DEDEDEbackground:#F8F8F8}

#ifocus_pic { display:inlineposition:relativefloat:leftwidth:540pxheight:225pxoverflow:hiddenmargin:10px 0 0 10px}

#ifocus_piclist { position:absolute}

#ifocus_piclist li { width:550pxheight:225pxoverflow:hidden}

#ifocus_piclist img { width:550pxheight:225px}

#ifocus_btn { display:inlinefloat:rightwidth:91pxmargin:9px 9px 0 0}

#ifocus_btn li { width:91pxheight:57pxcursor:pointeropacity:0.5-moz-opacity:0.5filter:alpha(opacity=50)}

#ifocus_btn img { width:75pxheight:45pxmargin:7px 0 0 11px}

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

#ifocus_opdiv { position:absoluteleft:0bottom:0width:545pxheight:35pxbackground:#000opacity:0.5-moz-opacity:0.5filter:alpha(opacity=50)}

#ifocus_tx { position:absoluteleft:8pxbottom:8pxcolor:#FFF}

#ifocus_tx .normal { display:none}

</style>

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=0i<iFocusBtns.lengthi++) {

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=0i<listLengthi++) {

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

}

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

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

classNormal('ifocus_btn','ifocus_tx')

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

}

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

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

classNormal('ifocus_btn','ifocus_tx')

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

}

if (currentNum==2&&listLength!=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==1&&listLength==2 ){

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

classNormal('ifocus_btn','ifocus_tx')

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

}

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

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

classNormal('ifocus_btn','ifocus_tx')

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

}

addLoadEvent(iFocusChange)

</script>

</head>

<body>

<br />

<ul>

</ul>

</div>

<ul>

<li class="current">2008年度排名第一的网页游戏</li>

<li class="normal">2009年最新的网页游戏 </li>

<li class="normal">商业大亨，挑战亿万富翁</li>

<li class="normal">一款2009年不得不玩的帝国远征</li>

</ul>

</div>

<ul>

</ul>

</div>

</body>

</html>

自己改图片链接和大小~~

1、提前准备一组图片，将图片名称设置一定规律：例如 img1.jpg、img2.jpg

2、编写鼠标点击事件

3、在鼠标点击时间里，判断鼠标点击次数

4、根据不同次数，显示不同的图片

$(function(){

var items=new Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg")

var i=0

$("#bgImage").click(function(){

i++

if(i>items.length){

i=1

}

$(this).prop("src","img"+i+".jpg")

})

</script>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：python如何在屏保锁屏时，能够自动输入密码，恢复非锁屏状态？

# 下一篇：股市中的DMI(PDIMDIADXADXR)这些指标是什么意思？

推荐阅读

热门文章

最新发布

标签列表

JS实现点击一个按钮更换图片

给您推荐相同类型的内容：