求这里的图片如何通过点击按钮变化
<DOCTYPE HTML>
<html>
<head>
<title>图片切换</title>
<style>
.div{
width:1000px;
height:500px;
border:2px solid red;
}
#image{
background:url(9.jpg);
width:700px;
height:500;
}
</style>
</head>
<body>
<script type="text/javascrpt">
function inageChange(){
var image=document.getElementById("image");
var number=(Math.random()*(9-1)+1);
switch(number){
case 1:
image.innerHtml="(1.jpg)";
break;
case 2:
image.innerHtml="1.jpg";
break;
case 3:
image.innerHtml="1.jpg";
break;
case 4:
image.innerHtml="1.jpg";
break;
case 5:
image.innerHtml=="1.jpg";
break;
case 6:
image.innerHtml="1.jpg";
break;
case 7:
image.innerHtml="1.jpg";
break;
case 8:
image.innerHtml="1.jpg";
break;
case 9:
image.innerHtml="1.jpg";
break;
}
}
</script>
<div class="div">
<div id="image">
</div>
<input type="button" value="随机图像" onclick="imageChange()">
</div>
</body>
</html>
漫之旅2回答
-
懒懒萌萌的
你这代码贴得有头无尾的，而且是innerHTML，不是innerHtml。应该是.innerHTML = "<img src = url>"； -
我仍旧在这里
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;box-sizing:border-box;}body{background-color: #444;}#wrap{position:relative;margin:100px auto;width:400px;height:500px;background: #f1f1f1;}#wrap img{position: absolute;top:50px; left:50px;width:300px;height:400px;}#wrap span{position: absolute;width:100%;height: 20px;text-align: center;color: #444;}#wrap .page{top:10px;}#wrap .footer{bottom:10px;}#wrap a{position: absolute;text-decoration: none;display: inline-block;width: 30px;height: 30px;top:50%;margin-top: -15px;background-color: rgba(0,0,0,.05);color:#fff;font-size: 20px;text-align: center;line-height: 30px;}#wrap a:hover{background-color: rgba(0,0,0,.7);}#wrap .prev{left: 10px;}#wrap .next{right: 10px;}#wrap .prev:hover{padding-right: 5px;}#wrap .next:hover{padding-left: 5px;}#wrap #loop{top:-5%;left:35%;width: 50px;background: #fff;color: #444;margin-right: 10px;text-align: center;line-height: 25px;}#wrap #sequence{top:-5%;left:60%;width: 50px;background: #fff;color: #444;text-align: center;line-height: 20px;}</style></head><body><div id="wrap"><img id="myImg" src="" alt=""><span id="page">数量加载中</span><span id="footer">作品名称</span><a id="prev" href="javascript:;"><</a><a id="next" href="javascript:;">></a><a id="loop" href="javascript:;">loop</a><a id="sequence" href="javascript:;">seq</a></div><script>window.onload = function(){var oMyImg = document.getElementById("myImg");var oPage = document.getElementById("page");var oFooter = document.getElementById("footer");var oPrev = document.getElementById("prev");var oNext = document.getElementById("next");var oLoop = document.getElementById("loop");var oSeq = document.getElementById("sequence");var arrImg = ['src/2.jpg','src/3.jpg','src/4.jpg','src/5.jpg','src/6.jpg'];var arrText = ['艺妓回忆录','幸福来敲门','小情人','吸血鬼','吉他'];var num = 0;var moduleChange;var omg , seqPrev, seqNext;function imgTab(){oPage.innerHTML = num + 1 +"/"+ arrImg.length; oFooter.innerHTML = arrText[num]; oMyImg.src = arrImg[num];}imgTab();oLoop.onclick = function(){moduleChange = true;}oSeq.onclick = function(){moduleChange = false;clearInterval(omg);} oNext.onclick = function(){ if(moduleChange){ clearInterval(omg); omg = setInterval(function(){ num++; if(num > 4){ num = 0; } imgTab(); },800); }else{ if(num == 4){ alert("这已经是最后一张了"); } clearInterval(seqPrev); seqNext = setInterval(function(){ num++; if(num > 4){ num = 4; clearInterval(seqNext); } imgTab(); },800); } } oPrev.onclick = function(){ if(moduleChange){ clearInterval(omg); omg = setInterval(function(){ num--; if(num < 0){ num = 4; } imgTab(); },800); }else{ if(num == 0){ alert("这已经是第一张了"); }else{ clearInterval(seqNext); seqPrev = setInterval(function(){ num--; if(num < 0){ num = 0; clearInterval(seqPrev); } imgTab(); },800); } } }这是以前写的一个小例子，包含了自动循环播放，正序播放，逆序播放，点击下一张，上一张播放等功能，你参考下
随时随地看视频慕课网APP
相关分类
JavaScript