JavaScript【图片轮播】

JavaScript代码：

<script type="text/javascript">
var arr= new Array;
arr[0] = "image/a.jpg";
arr[1] = "image/b.jpg";
arr[2] = "image/c.jpg";
arr[3] = "image/d.jpg";
arr[4] = "image/f.jpg";
var Timer = setInterval(play,1000);
var count=1;
function play(){if(arr.length==count)count=0;document.getElementById("pic").src=arr[count];count++;
}
function clearTimer(){clearInterval(Timer);
}function onMouseOver(obj){clearTimer();var index=parseInt(obj.value);document.getElementById("pic").src=arr[index-1];count=index;
}
function btnMouseOut(){Timer = setInterval(play,1000);
}
function init(){var btns = document.getElementsByTagName("input");for(var i = 0; i<btns.length;i++){btns[i].onmouseout = btnMouseOut;}
}
</script>

HTML代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body οnlοad="init()">
<img id="pic" src="data:image/a.jpg" width="600" height="450" /><br />
<input type="button" value="1" id="1" οnmοuseοver="onMouseOver(this)"/>
<input type="button" value="2" id="2" οnmοuseοver="onMouseOver(this)" />
<input type="button" value="3" id="3" οnmοuseοver="onMouseOver(this)" />
<input type="button" value="4" id="4" οnmοuseοver="onMouseOver(this)" />
<input type="button" value="5" id="5" οnmοuseοver="onMouseOver(this)" />
</body>
</html>

JavaScript【图片轮播】相关推荐

html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
简易javascript图片轮播代码
javascript图片轮播代码因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅. html部分代码: <div id="head"> <button ...
html图片轮播replace,JavaScript图片轮播代码分享
为大家分享的JavaScript图片轮播代码如下无标题文档 .img-div img{display:none;} 1 2 3 4 5 var zBase= { $id:function(id){r ...
php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析此效果的层次结构比较清楚: 1. c ...
html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 body, div, ul, li { margin: ; padding: ; } ul { list-style-t ...
javascript图片轮播(完全自己手写代码)
2019独角兽企业重金招聘Python工程师标准>>> 今天教同事jquery,用图片轮播来做课件,下面将页面代码分享给大家,希望能给大家带来帮助,另外,本示例界面比较粗糙,请海涵, ...
JavaScript图片轮播案例
 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
javascript 图片轮播效果
类似于淘宝首页广告图片轮播图效果,同时,点击左右箭头及下方数字键可进行切换图片 1.HTML <!DOCTYPE html> <html> <head> ...
javascript图片轮播技术动态实现
我们经常会在网页中见到轮播的图片,如京东主页面中图片自动更换.我们在这里对这一技术进行实现,主要能够使图片自动进行轮播,数字标签随着图片一同更换,鼠标移动到数字标签上,相应的图片停留,鼠标在整个图片区 ...
JavaScript图片轮播图
轮播图四张图片每隔2秒换下一张四张图片每隔2秒换下一张 <!DOCTYPE html> <html lang="en"> <head>< ...

JavaScript【图片轮播】

JavaScript【图片轮播】相关推荐

最新文章

热门文章