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实现自动切换图片代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 原生JS实现隐藏显示图片 JS实现点击切换图片效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <

  • 图片旋转、鼠标滚轮缩放、镜像、切换图片js代码

    本文实例为大家展示了图片旋转.鼠标滚轮缩放.镜像.切换图片多重效果,提供了详细的代码,分享给大家供大家参考,具体内容如下 具体代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <meta charset="utf-8" /> <!--<script type="

  • 使用JavaScript实现点击循环切换图片效果

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <script> var i = 1; function nextImg(){ i++; //步骤2:获取页面元素 var next = document.getElementById("

  • js实现使用鼠标拖拽切换图片的方法

    本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan

  • JS鼠标滑过图片时切换图片实现思路

    在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里小编说说这是怎么实现的. 在写Javascript代码前我们必须要有实验的HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery deal images</t

  • js动态切换图片的方法

    本文实例讲述了js动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: index.css文件如下: 复制代码 代码如下: * {      margin: 0px;padding: 0px;  }    body {      width: 632px;      /*background-color: blue;*/      margin: 0 auto;  }    #imgsCom {      background-color: yellow;      /*相对定位,为了下

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

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

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

  • JavaScript简单实现鼠标移动切换图片的方法

    本文实例讲述了JavaScript简单实现鼠标移动切换图片的方法.分享给大家供大家参考,具体如下: <title>JavaScript切换图片</title> <script> function showDaTu(src){ document.getElementById("defaultImg").src=src; } </script> <img src="images/wall1.jpg" id="

  • 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>

  • Android ViewPager实现每隔两秒自动切换图片功能

    Android ViewPager实现每隔两秒自动切换图片功能

    布局代码: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <Fr

  • javascript 定时自动切换的选项卡Tab

    这里要注意,用于产生changeTabInterval的随机数,防止页面上TabPane过多,如果设置的changeTabInterval都一样的话会产生整齐划一的切换的效果,不美观. 自动切换Tab选项卡 function randint(m,n)//产生m-n之间的随机整数 { return Math.random()*(n-m)+m; } function IfNull(a,dv) { return typeof(a) =="undefined"?dv:a; } var TabP

  • 一段非常简单的让图片自动切换js代码

    复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5

  • Javascript中自动切换焦点实现代码

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test javascript</title> <script type="text/javascript"> window.onload = function() { var EventUtil = { addhandler:function

  • Android应用中图片浏览时实现自动切换功能的方法详解

    Android应用中图片浏览时实现自动切换功能的方法详解

    先给最终效果图: 当我们在最下边的gallery中切换图片时,上面的大图片会自动切换,切换时有动画效果哦,很简单的一个程序,有待完善更多的功能! activity代码: package cn.com.chenzheng_java; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.V

  • js实现轮播图效果 纯js实现图片自动切换

    本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片: 2. 鼠标离开,恢复自动播放: 3. 点击下方中间几个小圆圈,也会自动切换图片: 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&quo

  • 基于javascript实现tab切换特效

    基于javascript实现tab切换特效

    本文实例为大家分享了javascript实现tab切换特效代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px;

  • 纯javascript实现自动发送邮件

    描述: 此JavaScript将帮助你的电子邮件的人.只要按一下电子邮件,有人!和JavaScript会要求的电子邮件地址,主题,等等然后你,新的邮件,是向你打开了. <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function mailsome1(){ who=prompt("Enter recipient's email address: ","antispammer@earthling.net

随机推荐