<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 回答
我仍旧在这里
TA贡献2条经验 获得超0个赞
<!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);
}
}
}
这是以前写的一个小例子，包含了自动循环播放，正序播放，逆序播放，点击下一张，上一张播放等功能，你参考下
添加回答
举报
0/150
提交
取消