关于做这样的功能,需要掌握html基本元素、css布局,js知识。当你看到关于轮播图这样的效果展示,有点不敢相信,因为自己的真的不会,一方面真的不会,所以就是不会,详细一点的介绍,可是又没有时间,源码就在其中,主要复制到自己的电脑上,配置一下具体的文件结构,还有就是添加几张图片,就能完美展示在你面前。
这是css样式文件
/* 公共部分 */
body{
background-color: #666;
}
ul{
padding: 0;
margin: 0;
}
li{
list-style: none; /*去除样式*/
}
img{
border: 0;
}
/* 整个布局*/
.play{
width: 400px;
height: 430px;
margin: 50px auto 0; /* 上边距50px 左右居中 下边距0 */
background-color: #999;
font: 12px Arial;/* 字体大小12px 雅黑字体 */
}
/* 大的轮播图 设置开始*/
.big_pic{
width: 400px;
height: 320px;
overflow: hidden; /* 超出隐藏 */
border-bottom: 1px solid #ccc;
background-color: #222;
/* background-color: red; */
position: relative;/* 绝对布局*/
}
.big_pic li img{
width: 400px;
/* height: 320px; */
}
.big_pic li{
width: 400px;
height: 320px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: url(../images/loading.gif) no-repeat center center;
}
/* 左表记 */
.mark_left{
width: 200px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
z-index: 300;
filter: alpha(opacity:0);
opacity: 0;
}
/*右表记*/
.mark_right{
/* width: 200px; */
width: 50%;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: red;
z-index: 300;
filter: alpha(opacity:0);
opacity: 0;
}
/* 左边上一张 */
.big_pic .prev{
width: 60px;
height: 60px;
background: url(../images/btn.gif) no-repeat;
z-index: 301;
/* position: relative; */
position: absolute;
top: 130px;
left: 10px;
cursor: pointer;/* 鼠标样式变为小手 */
filter: alpha(opacity:0);
opacity: 0;
}
/* 右边上一张 */
.big_pic .next{
width: 60px;
height: 60px;
background: url(../images/btn.gif) no-repeat 0 -60px;
z-index: 301;
/* position: relative; */
position: absolute;
top: 130px;
right: 10px;
cursor: pointer;/* 鼠标样式变为小手 */
filter: alpha(opacity:0);
opacity: 0;
}
/* 文本信息 */
.big_pic .text{
position: absolute;
left: 10px;
bottom: 5px;