JavaScript

最新推荐文章于 2022-02-26 21:25:27 发布

原创最新推荐文章于 2022-02-26 21:25:27 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ImageObject

java Script 专栏收录该内容

5 篇文章

订阅专栏

1.今天第一个测试的是图片轮播的情况，自行更换照片。

<html>
<head>
<title>轮播图片</title>
</head>

<body>
<center>
<p><button onclick="sgw()">开始轮播</button>
<button onclick="stop()">停止轮播</button></p>
<img src="1.jpg" width="500px" id="img1" onmouseover="stop()" onmouseout="sgw()" />
</center>
<script>
var img=new Array();
img[1]="1.jpg";
img[2]="2.jpg";
img[3]="3.jpg";
img[4]="4.jpg";
var uu=1;
//s=setInterval(sgw,1000);
function sgw(){
var image=document.getElementById("img1");
if(uu==img.length-1)
uu=1;
else
uu++;
image.src=img[uu];
s=setTimeout(sgw,1000);
}
function stop(){
//cleraInterval(s);
clearTimeout(s);
}
</script>
</body>

</html>

上面的代码运用了鼠标停止在照片上会暂停离开又开始轮播，还有按钮开始和轮播。代码中图片最好和代码在同一文件下，例如：src="1.jpg"是打开代码显示的第一张图片。

2.今天测试的第二个代码：我利用了图片在网页中根据鼠标的滚动来放大和缩小图片，以左上角为放大目标。

<html>
<head>
<title>测试滚动图片变换大小</title>
</head>

<body>
<table>
<tr>
<td><span class="style1">拖动鼠标滚轮</spam></td>
</tr>
</table>
<center>
<a href=" "><img src="image1.jpg" onmousewheel="return sgw(this)"></a>
</center>
<script>
function sgw(i){
var zoom=parseInt(i.style.zoom,10)||100;
zoom+=event.wheelDelta/12;
if(zoom>0){
i.style.zoom=zoom+'%';
}
return false;
}
</script>