简单学习HTML图片轮播（初学）
先了解大体结构：<!DOCTYPE html><html><head><meta charset="utf-8" /><title>标题</title></head><body><img id="pic" src="index/pic1.jpg" width="690" height="350"&
先了解大体结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
<body>
<img id="pic" src="index/pic1.jpg" width="690" height="350">
</body>
</html>
大家看来应该发现了当出现“<>”后面就有</>，我们得知道这些标签里面是用来干嘛的，首先咱们就在<body></body>中写内容，我们可以直接插入一个图片<img id="pic" src="index/pic1.jpg" width="690" height="350">在这个图片的插入中我们发现有id、src、width、height，这些是img图片的一些属性，src=图片的路径(相对路径)，id是给它标记一个id号，方便后面对图片的设置，width和height图片的宽高，px像素表示。
插入图片后我们发现图片是在左上角的，这个时候我们就要给它排版到想要的位置，怎么解决呢？
用div来引导：
给div一个class然后设置整个div的属性，把图片用ul包起来。
<div class=”test1”>
<ul>
<img id="pic" src="index/pic1.jpg" width="690" height="350">
<ul>
</div>
这一步弄好再设置整个div，我们在<style></style>中设置，把style放在head后面body前面：
</head>
<style></style> 我们把它放在这里就行了
<body>
…
在里面写简单代码：
.test1{
position:relative; /*把他当作母体位置*/
width:1300px;
height:600px;
border:1px solid #F00; /*给div整个框弄一个红色1像素的边框*/
overflow:hidden; /*把超出这个框的东西隐藏起来*/
}
这里的width:1300px;height:600px;是指div这个框的宽高了，图片在在它里面是width="690" height="350".
接着设置图片在“div“中的位置：
.test1 ul{
position:absolute; /*当作在母体中的子体位置*/
width:690px;
height:350px;
top:150px; /*离母体顶部150像素的地方*/
left:300px; /*离母体左边300像素的地方*/
}
这样图片的位置就放好了。
接下来我们实现轮播图片：
要使图片自动播放就需要构造函数，咱们写函数用<script></script>放在<body>与</html>之间：
<script>
var pic=document.getElementById("pic");
var arr=new Array("index/pic1.jpg","index/pic2.jpg "," index/pic3.jpg ");
var imgIndex=0;
function pic_Change(){ /*构造换图函数*/
if(imgIndex==2){
imgIndex=0;
}
else{
imgIndex++;}
pic.src=arr[imgIndex]; /*这里把arr[imgIndex]赋给pic中的src来改变原src的值（即原图片）*/
}
var picc=setInterval(pic_Change,3000); /*执行语句*/
</script>
我们一一分析上面的部分：
第一句使用document中的getElementById抓取id为pic的数据,前面我们已经把图片的id设置成了pic，相当于我们获取了这个图片的数据，把他赋给定义的pic
第二句var一个数组arr，里面包含三张图片，路径不能错要和第一张一样的路径
第三句var 一个imgIndex=0;作为数组下标它的值变化范围可以是0、1、2
第四句构造函 function pic_Change()，里面主要写跟随imgIndex的变化，arr[imgIndex]也会跟着变化，而后pic.src也会变化即图片改变
最后一句 var picc=setInterval(pic_Change,3000);
setInterval(pic_Change,3000)里面的参数（X，Y），X代表执行的函数pic_Change，Y代表多少毫秒执行一次，这里是3000毫秒也就是3秒。
这样简单的图片轮播就做好啦。
以上的js、css等不分文件了直接写在一起因为简单，如果有错误请告知哦
整体代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
.test1{
position:relative; /* 把他当作母体位置*/
width:1300px;
height:600px;
border:1px solid #F00;
overflow:hidden;
}
.test1 ul{
position:absolute; /*当作在母体中的子体位置*/
width:690px;
height:350px;
top:150px; /*离母体顶部150像素的地方*/
left:300px; /*离母体左边300像素的地方*/
}
</style>
<body>
<div class="test1">
<ul>
<img id="pic" src="实验5/images/index/pic1.jpg" width="690" height="350">
</ul>
</div>
</body>
<script>
var pic=document.getElementById("pic");
var arr=new Array("实验5/images/index/pic1.jpg","实验5/images/index/pic2.jpg ","实验5/images/index/pic3.jpg ");
var imgIndex=0;
function pic_Change(){ /*构造换图函数*/
if(imgIndex==2){
imgIndex=0;
}
else{
imgIndex++;}
pic.src=arr[imgIndex]; /*这里把arr[imgIndex]赋给pic中的src来改变原src的值（即原图片）*/
}
var picc=setInterval(pic_Change,3000); /*执行语句*/
</script>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
15
0- 0
已为社区贡献1条内容
所有评论(0)