HTML中的图片轮播怎么做？

可以上jquery插件库这个网站看看，大部分资源是免费的。轮播图也有好多。

bootstrap也提供轮播模板。

自己写的话，假如放3张轮播图，pic1，pic2，pic3。创建一个ul，ul中放5张图片，顺序是pic3，pic1，pic2，pic3，pic1，这样衔接起来。设置ul的宽度是500%，li的宽度是20%，这样图片就能一字排开，设置ul的父元素的样式为overflow:hidden再用CSS3的动画属性，让li中的图片元素位移或者让ul位移。

古老的做法是用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,分号用的有些乱。

用marquee 这个是没法解决的，网上现在的解决办法都是 javascript+css 来解决

你可也搜索一下 焦点图 或是焦点轮转图，有很多的jquery 的插件 或是javascript 原生代码，

这个原理也不是控制table 而是控制div 样式层 id 、 class 的样式表来，做的轮转。

---