JavaScript实现自动切换图片代码_javascript技巧

本文给大家分享一段js代码实现自动切换图片的实例代码,代码如下所示:

<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
window.onload=init;
var n=1; //图片标记数
var dingshi; //让图片动的定时器
function init(){
dingshi=window.setInterval("tupian()",1000);
}
//更换图片
function tupian(){
var obj=document.getElementById("img1");
n++;
if(n>=4){
n=1;
}
obj.src="yaj_"+n+".jpg";
}
//鼠标放上图片停止
function stoptupian(){
window.clearInterval(dingshi);
}
//鼠标离开图片动起来
function dongqilai(){
dingshi=window.setInterval("tupian()",1000);
}
</script>
</head>
<body>
<img src="yaj_1.jpg" onmouseover="stoptupian()" onmouseout="dongqilai()" id="img1">
</body>
</html>

以上所述是小编给大家介绍的JavaScript实现自动切换图片代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
切换图片
js实现中英文切换代码、js实现选项卡切换代码、php 实现模板切换代码、java实现图片切换代码、js实现图片切换代码,以便于您获取更多的相关知识。

时间: 2024-11-02 11:43:50

JavaScript实现自动切换图片代码_javascript技巧的相关文章

js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码_javascript技巧

今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下:     Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <

JS实现的文字与图片定时切换效果代码_javascript技巧

本文实例讲述了JS实现的文字与图片定时切换效果代码.分享给大家供大家参考.具体如下: 这是近来门户们都喜欢用的特效,左侧是一个大图片,右侧是对应文字,鼠标移动时,对应行的文字会变化,图片也相应的切换,如果没有鼠标动作时,它会自己播放,播放时间可调整,个人感觉挺不错的导航效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-txt-pic-time-cha-tab-codes/ 具体代码如下: <head> <meta http-e

js+div实现文字滚动和图片切换效果代码_javascript技巧

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

基于JavaScript实现网页倒计时自动跳转代码_javascript技巧

用JS实现网页上的自动跳转功能,倒计时跳转至指定网页,倒计时间可自设,时间到则自动跳转到指定的网址,对于JS来说,实现该似乎挺简单哦,用IIS上的301也可实现跳转,以及mete标签也可以实现自动跳转,根据你自己的需要了. <title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/javascript"> function delayURL(url)

javascript实现倒计时N秒后网页自动跳转代码_javascript技巧

复制代码 代码如下: <title>JS倒计时网页自动跳转代码</title>   <script language="JavaScript" type="text/javascript">     function delayURL(url) {         var delay = document.getElementById("time").innerHTML;         if(delay &g

基于JavaScript实现轮播图代码_javascript技巧

一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

网站基于flash实现的Banner图切换效果代码_javascript技巧

本文实例讲述了网站基于flash实现的Banner图切换效果代码,该实例的主要切换功能是由flash完成的.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

javascript结合canvas实现图片旋转效果_javascript技巧

我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果.本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果.我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转. HTML 我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转. <div id="tool">

用javascript实现自动输出网页文本_javascript技巧

用javascript实现自动输出网页文本,用了setTimeout(),递归和String.substring();两个函数实现此功能,下面把实现代码分享给大家. 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content=&q