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>