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

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

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

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

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

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

<html>

<head>

<style>

#div1 {position:relativewidth:650pxheight:210pxoverflow:hidden}

#div2{position:absolute}

li{float:leftlist-style-type:nonepadding:5px}

img{border:none}

a{position:relative}

</style>

window.onload=function()

{

var odiv2=document.getElementById('div2')

var ali=odiv2.getElementsByTagName('li')

var aspeed=-5

odiv2.innerHTML+=odiv2.innerHTML

odiv2.style.width=ali[0].offsetWidth*ali.length+'px'

setInterval(function()

{

odiv2.style.left=odiv2.offsetLeft+aspeed+'px'

if (odiv2.offsetLeft<-odiv2.offsetWidth/2)

{

odiv2.style.left='0px'

}

},30)}

}

</script>

</head>

<body>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

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