编程 Javascript

js实现图片轮换效果代码

Posted in Javascript onApril 16, 2013

<!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" class="style1" src="images/1.jpg" width="500px" height="500px" /> 
<input type="button" value="两张图片切换" onclick="showimg();" /> 
<br /> 
<input type="button" value="多张图片轮换" onclick="imgfor();;" /> 
<br /> 
<input type="button" value="结束执行" onclick="clearfun();" /> 
</body> 
</html>

js实现图片轮换效果代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript的函数

Jan 31 Javascript

HTML复选框和单选框 checkbox和radio事件介绍

Dec 12 Javascript

关闭浏览器窗口弹出提示框并且可以控制其失效

Apr 15 Javascript

JavaScript中数组继承的简单示例

Jul 29 Javascript

vue中渐进过渡效果实现

Oct 27 Javascript

ES6中Proxy代理用法实例浅析

Apr 06 Javascript

Angular.js ng-file-upload结合springMVC的使用教程

Jul 10 Javascript

JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

Sep 23 jQuery

详解Webpack+Babel+React开发环境的搭建的方法步骤

Jan 09 Javascript

微信小程序开发之改变data中数组或对象的某一属性值

Jul 05 Javascript

解决Vue中使用keepAlive不缓存问题

Aug 04 Javascript

javascript实现贪吃蛇游戏（娱乐版）

Aug 17 Javascript

js相册效果代码(点击创建即可)

Apr 16 #Javascript

jQuery实现点击标题输入详细信息

Apr 16 #Javascript

jQuery图片的展开和收缩实现代码

Apr 16 #Javascript

js变换显示图片的实例

Apr 16 #Javascript

在jQuery中常用的选择器介绍

Apr 16 #Javascript

jQuery中对节点进行操作的相关介绍

Apr 16 #Javascript

jQuery中实现动画效果的基本操作介绍

Apr 16 #Javascript