简单的HTML+js图片轮播?

h5代码：

<div id="wrap">

<ul id="list">

<li>10</li>

<li>9</li>

<li>8</li>

<li>7</li>

<li>6</li>

<li>5</li>

<li>4</li>

<li>3</li>

<li>2</li>

<li>1</li>

</ul>

</div>

css代码：

<style type="text/css">

@-webkit-keyframes move{

0%{left:-500px}

100%{left:0}

}

#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px auto

overflow: hidden}

#list{position:absoluteleft:0top:0padding:0margin:0

-webkit-animation:5s move infinite linearwidth:200%}

#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pink

color:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}

#wrap:hover #list{-webkit-animation-play-state:paused}

</style>

扩展资料：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

古老的做法是用settimeout或者setinterval实现循环动画，但是这样就会造成题主说的，在且页面的时候会造成混乱。

因为当页面失去焦点时浏览器不再渲染页面，但是settimeout/setinterval的请求不会停止，队列会一直堆积动画，当页面再次获得焦点时动画队列早已堆积了大量命令，就会导致动画混乱。

现在的做法，笼统地说，是使用requestanimationframe函数，用法和settimeout/setinterval类似，只不过requestanimationframe不接受时间参数,函数的执行频率由浏览器的渲染帧数决定，这就实现了由浏览器决定动画队列，避免了动画混乱。当然也可以使用一些现成的轮播图插件，题主可以自己百度，这里对比举例说明一下settimeout和requestanimationframe的用法。

//用setTimeout实现在控制台循环输出hello world

function fun(){

    console.log('hello world')

    setTimeout(function(){

        fun()

    },3000)

}

fun()//执行fun函数，就可以每隔3000毫秒递归的输出hello world

//用reqestanimationframe实现在控制台循环输出hello world

function fun(){

    console.log('hello world')

    requestAnimationFrame(function(){

        fun()

    })

}

fun()//执行fun函数，就可以每隔3000毫秒递归的输出hello world

//requestAnimationFrame没有时间参数，所以直接使用不能控制间隔

//但我们可以人为的限制执行间隔，方法如下

function fun(last_time){

        if(new Date().getTime() - last_time > 3000){

            console.log('hello world')

            requestAnimationFrame(function(){

                fun(new Date().getTime())

            })

        }else{

            requestAnimationFrame(function(){

                fun(last_time)

            })

        }

}

fun(new Date().getTime())

//这样就可以为requestAnimationFrame设置间隔，实现每隔3000毫秒输出hello world

//抱歉我主写c副写python偶尔写javaweb,分号用的有些乱。

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

---