Html5如何快速在页面中写出多个轮播图效果

Question

如题所述

Answer 1

光是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);//切换时间

Answer 2

使用bootstrap可以快速编写N个轮播（注意代码冲突）