怎么用html5+css3 实现图片轮播

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。

光是html的话很难实现轮播，轮播一般都是html+js才能完成。

给你一个最简单的html+js轮播例子：

html代码：

<div class="side" id = "lunbo">    

        <ul">    

            <li><img src="../images/1.jpg"></li>    

            <li><img src="../images/2.jpg"></li>    

            <li><img src="../images/3.jpg"></li>    

        </ul>    

</div>

js代码：

var li=document.getElementById('lunbo').getElementsByTagName("li")  

    var num=0  

    var len=li.length  

  

    setInterval(function(){  

        li[num].style.display="none"  

        num=++num==len?0:num  

        li[num].style.display="inline-block"  

  

},3000)//切换时间

---