图片轮播html实现原理,简单轮播图的实现及原理讲解（js）

0.最终效果预览

鼠标未触及区域时(自动滚动中)

鼠标触及区域后 (停止滚动，显示按钮)

基本功能

自动无缝滚动

左右按钮控制滚动

点击圆点切换图片

1.整体结构与思路

Html部分

• 
• 
• 
• 
• 

<

>

三个div，最外层id为parent的大div内包含了uls和buttons两个div，divuls中包含了两个列表img_ul(图片列表), litCir_ul(小圆点列表)，divbuttons里则包含了“左”， “右”两个按钮。

CSS部分

#parent{

position: relative;

margin: 50px auto;

padding: 0;

width: 500px;

height: 309px;

}

#uls{

position: relative;

margin: 0;

padding: 0;

width: 500px;

height: 309px;

overflow: hidden;

}

#img_ul{

position: absolute;

margin: 0;

padding: 0;

left: 0;

top: 0;

width: 3000px; /*多留出一张图片的宽度！*/

list-style: none;

}

#img_ul li{

float: left;

margin: 0;

padding: 0;

width: 500px;<