如何使用javascript做一个网页轮播图

1、轮播图在网页中是非常常见的，所以做轮播图是必然的！

2、首先在网页上设置轮播图的区域（也就是div）！

3、然后在div里面插入图片再通过javascript改变图片的路径更改图片达到轮播的效果！

 

 

定义一个div 代码如下：

<div>
    <img src="1_b.jpg" id="img">
</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="1_b.jpg" id="img">
</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>
posted @ 2015-08-09 19:54  QWERDF  阅读(2548)  评论(0)  编辑  收藏  举报