html简单实现自动轮播代码怎么写,js+html+css实现手动轮播和自动轮播

本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码，供大家参考，具体内容如下

原理：设置图片层的总长=单张图片长度*张数；在轮播层中利用overflow只留出一张图片的显示； 通过图片层的left来显示轮播的每一张图，第一张为0，为了后面的图片显示，left的值左移为负数。

原理图

代码：

轮播图

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

a{

text-decoration: none;

}

#container{

position: relative;

width: 500px;

height: 260px;

margin: 20px auto;

overflow: hidden; /*溢出隐藏：只显示一张图片*/

}

#container .parent{

position: absolute;

width: 2500px; /*整个图片层长度：500*5=2500*/

height: 260px;

}

#container .parent li{

float: left;

width: 500px;

height: 100%;

}

#container .parent li img{

width: 100%;

height: 100%;

}

#container .btnLeft,

#container .btnRight{

width: 30px;

height: 30px;