简单的HTML+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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tab { overflow:hidden; width:400px; height:250px; position:relative; float:left;}
</style>
</head>
<body>
<div id="tab">
<img src="img/01.jpg" width="400" height="250"/>
<img src="img/02.jpg" width="400" height="250"/>
<img src="img/03.jpg" width="400" height="250"/>
</div>
<script>
</script>
</body>
</html>
如何用window.onload=function(){写上一个定时器},具体用JS怎么写...谢谢 展开
h5代码：
<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
css代码：
<style type="text/css">
@-webkit-keyframes move{
0%{left:-500px;}
100%{left:0;}
}
#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
overflow: hidden;}
#list{position:absolute;left:0;top:0;padding:0;margin:0;
-webkit-animation:5s move infinite linear;width:200%;}
#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}
#wrap:hover #list{-webkit-animation-play-state:paused;}
</style>
扩展资料：
轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。
var index=0;//每张图片的下标，window.onload=function(){
var start=setInterval(autoPlay,1000);//开始轮播，每秒换一张图
$('imgchangediv').onmouseover=function(){//当鼠标光标停在图片上，则停止轮播
clearInterval(start);
$('imgchangediv').onmouseout=function(){//当鼠标光标停在图片上，则开始轮播
start=setInterval(autoPlay,1000);
} var lis=$('imgyuan').getElementsByTagName('font');//得到所有圆圈
//当移动到圆圈，则停滞对应的图片
var funny = function(i){
lis[i].onmouseover = function(){
changeImg(i)
} for(var i=0;i<lis.length;i++){
funny(i);
}//一轮过后，还是第二轮function autoPlay(){
if(index>7){
index=0;
changeImg(index++);
}//对应圆圈和图片同步function changeImg(index){
var list=$('imgchangediv').getElementsByTagName('img'); var
list1=$('imgyuan').getElementsByTagName('font'); for(i=0;i<list.length;i++){
拓展资料：
HTML是网页应用程序以及移动应用程序的用户界面，网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素，浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tab { overflow:hidden; width:400px; height:250px; position:relative; float:left;}
#tab>img:not(:first-child){ display:none; }
</style>
<script>
window.onload = function(){
var images = document.getElementsByTagName('img');
var pos = 0;
var len = images.length;
setInterval(function(){
images[pos].style.display = 'none';
pos = ++pos == len ? 0 : pos;
images[pos].style.display = 'inline';
},1000);
};
</script>
</head>
<body>
<div id="tab">
<img src="img/01.jpg" width="400" height="250"/>
<img src="img/02.jpg" width="400" height="250"/>
<img src="img/03.jpg" width="400" height="250"/>
</div>
</body>
</html>
实现简单的HTML+js图片轮播，在<body>前加入以下代码：
<script>
window.onload = function(){
var images = document.getElementsByTagName('img');
var pos = 0;
var len = images.length;
setInterval(function(){
images[pos].style.display = 'none';
pos = ++pos == len ? 0 : pos;
images[pos].style.display = 'inline';
},1000);
};
</script>
图片轮播效果如下：
拓展资料：
JavaScript一种直译式脚本语言，简称js，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
|
广告 您可能关注的内容 |
