html5轮播实例,javascript基础知识之html5轮播图实例讲解（44）.pdf

javascript基基础础知知识识之之html5轮轮播播图图实实例例讲讲解解 ((44))

本文实例为大家分享了html5轮播图的具体代码，供大家参考，具体 容如下

1.轮播图的布局：

/*去除默认样式*/

*{

margin: 0;

padding: 0;

}

/*设置div*/

#outer{

width: 520p ;

height: 333p ;

/*设置居中*/

margin: 50p auto;

/*

* 设置背景颜色

*/

background-color: greenyellow;

/*设置上下 边距*/

padding: 10p 0;

/*为父元素开启相对定位*/

position: relative;

/*隐藏溢出的 容*/

overflow : hidden;

}

/*设置ul*/

#imgList{

/*去除项目符号*/

list-style: none;

/*设置ul的宽度*/

width: 2600p ;

/*开启绝对定位*/

position: absolute;

/*

* 通过修改ul的left值，可以切换图片

* 1 0p

* 2 -520p

* 3 -1040p

* 4 -1560p

*

*/

left: 0p ;

}

/*设置li*/

li{

/*设置元素浮动*/

float: left;

/*设置外边距*/

margin: 0 10p ;

}

/*设置导航按钮*/

#nav{

/*开启绝对定位*/

position: absolute;

/*定位*/

bottom: 20p ;

/*

* #outer 宽度 520p

*

* #nav 宽度 125p

*

* 520 - 125 = 395/2 = 197.5

*/

left: 197p ;

}

#nav a{

/*设置a浮动*/

float: left;