1、轮播图在网页中是非常常见的,所以做轮播图是必然的!
2、首先在网页上设置轮播图的区域(也就是div)!
3、然后在div里面插入图片再通过javascript改变图片的路径更改图片达到轮播的效果!
定义一个div 代码如下:
<div><img src="http://www.likecs.com/1_b.jpg">
</div>
设置div的样式:
<style type="text/css">
div{
width: 200px;
height: 200px;
}
</style>
接下来使用JavaScript改变图片的路径:
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];//获得div的对象!
var img=document.getElementById("img"); //获得图片的对象
var i=2;先定义一个图片变量
setInterval(function(){
//setInterval定时器每1s调用一次匿名函数 实现每1s改变一次图片的路径!达到轮播效果!
img.src=i+"_b.jpg";//改变图片的路径
i++; //每次把i加一次
if(i>5){
//做一个判断 如果i大于5则把i的值重新赋值为1!
i=1;
}
},1000)
</script>
//完整代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="http://www.likecs.com/1_b.jpg">
</div>
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
var img=document.getElementById("img");
var i=2;
setInterval(function(){
img.src=i+"_b.jpg";
i++;
if(i>5){
i=1;
}
},1000)
</script>
</body>
</html>