使用JavaScript完成轮播图的练习
图片会自动的切换,图片下方有指定的按钮切换图片。
这里面包含的知识点有:
- 定时器的使用
- 动画的操作(这里把动画的操作封装成了一个方法)。
- 还有一个方法获取当前元素的指定样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图界面</title>
<style>
*{
margin: 0;
padding: 0;
}
#outer{
width: 420px;
height: 500px;
/* border: 1px solid black; */
background-color: greenyellow;
margin: 50px auto;
padding: 10px 0;
position: relative;
overflow: hidden;
}
#outer #imgList{
/* 这里不能写死,不然的话多一张少一张图片很麻烦
所以这里要在js中进行通过照片数量进行自己调整。*/
/* width: 200px; */
list-style: none;
position:absolute;
left: 0px;
}
#outer #imgList li{
margin: 0 10px;
float: left;
}
#outer #imgList li img{
width: 400px;
height: 500px;
}
/* 设置导航栏按钮 */
#navDiv{
position: absolute;
bottom: 15px;
left: 147.5px;
}
#navDiv a{
/* display: block; */
/* 浮动的话就变成了块元素可以省略 */
width: 15px;
height: 15px;
background-color:red;
float: left;
margin: 0 5px;
/* 设置透明 */
opacity: 0.5;
/* 兼容IE8的透明 */
filter: alpha(opacity=50)