手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js实现图片轮换效果代码
js实现图片轮换效果代码
摘要:复制代码代码如下: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>

【js实现图片轮换效果代码】相关文章:

js实现仿Windows风格选项卡和按钮效果

jquery实现图片左右切换的方法

基于jQuery插件实现环形图标菜单旋转切换特效

COOL而实用的动态效果

jQuery实现转动随机数抽奖效果的方法

JavaScript实现带标题的图片轮播特效

jQuery实现延迟跳转的方法

jQuery实现表格行上下移动和置顶效果

鼠标图片振动代码

JS实现模拟风力的雪花飘落效果

精品推荐
分类导航