html5轮播怎么自动换图,js实现轮播图效果 纯js实现图片自动切换

本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下

1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片；

2. 鼠标离开，恢复自动播放；

3. 点击下方中间几个小圆圈，也会自动切换图片；

源代码：

Document

* {

margin: 0;

padding: 0;

}

/* 轮播图盒子样式 */

.lunbotu {

position: relative;

width: 520px;

height: 280px;

margin: 50px auto;

background-color: blue;

overflow: hidden;

}

/* 左右按钮样式 */

.left,

.right {

display: none;

position: absolute;

top: 50%;

margin-top: -15px;

width: 30px;

height: 30px;

background-color: cornsilk;

border-radius: 15px;

text-align: center;

line-height: 30px;

cursor: pointer;

z-index: 1;

}

.left {

left: 0;

}

.right {

right: 0;

}

li {

list-style: none;

}

/* 设置图片的ul的样式 */

.firstul {

position: absolute;

top: 0;

left: 0;

width: 500%;

}

.firstul li {

float: left;