js实现图片轮换效果代码_Javascript教程-查字典教程网
js实现图片轮换效果代码
js实现图片轮换效果代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:varnumb=0;varimgnumb=1;functionshowimg(){//两张图片切换方法1/*numb++;...

复制代码 代码如下:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript">

var numb = 0;

var imgnumb = 1;

function showimg() {

//两张图片切换方法1 /*numb++;

if (numb % 2 == 0) {

document.getElementById('img1').setAttribute('src', 'images/1.jpg');

}

else {

document.getElementById('img1').setAttribute('src', 'images/2.jpg');

}*/

//两张图片切换方法2 /*if (numb == 0) {

document.getElementById('img1').setAttribute('src', 'images/2.jpg');

numb = 1;

}

else {

document.getElementById('img1').setAttribute('src', 'images/1.jpg');

numb = 0;

}*/

}

/图片轮换/多张 function imgfor() {

imgnumb++;

document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');

if (imgnumb == 9) {

imgnumb = 0;

}

}

var clearid;

function clearfun() {

clearInterval(clearid);

}

clearid=setInterval(imgfor, 1000);

</script>

</head>

<body>

<img alt="" id="img1" src="images/1.jpg" width="500px" height="500px" />

<input type="button" value="两张图片切换" />

<br />

<input type="button" value="多张图片轮换" />

<br />

<input type="button" value="结束执行" />

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类