JS实现轮播图（手动切换+自动切换两种方法）

最新推荐文章于 2025-05-27 17:39:28 发布

原创

最新推荐文章于 2025-05-27 17:39:28 发布 · 5.2w 阅读

228 ·

CC 4.0 BY-SA版权

文章标签：

#js实现轮播图

1.轮播图效果图

2.完整代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
/*设置外部div*/
#outer
{
	width:447px;
	height:240px;
	margin:50px auto;/*居中*/
	background-color:#0FF;/*设置背景颜色*/
	padding:10px 0;
	position:relative;/*父元素div开启相对定位*/
	overflow:hidden;/*裁剪溢出内容*/
}
/*设置ul*/
#imgList
{
	list-style:none;/*去除项目符合*/
    position:absolute;/*给ul开启绝对定位*/
	left:0px;/*设置偏移量，每向左移动447px就会显示下一张图片*/
}
/*设置图片中的li*/
#imgList li
{
	float:left;/*设置浮动*/
	margin:0 10px;/*设置左右外边距*/
	
}
/*设置导航按钮*/
#navdiv
{
	position:absolute;/*开启绝对定位*/
	bottom:15px;/*设置位置*/	
}
#navdiv a
{
	float:left;/*设置超链接浮动*/
	width:15px;
	height:15px;
	background-color:#F00;/*设置背景颜色*/
	margin:0 5px;/*设置左右外边距*/
	opacity:0.5;/*设置半透明*/
	/*兼容IE8透明的写法为，filter:alpha(opacity=50