效果图如下：
文章图片
【图片轮播（上一幅下一幅+圆点+自动切换）】代码如下：
- 锐客网 *{
margin:0;
padding:0;
}
#imgList{
width:730px;
height:420px;
margin:100px auto;
border:1px solid pink;
position:relative;
border:6px dashed pink;
}
#imgList:hover .pre,#imgList:hover .next{
display:block;
}
#imgList .img{
position:absolute;
top:0;
left:0;
z-index:-1;
}
ul li{
list-style-type:none;
float:left;
}
#imgList .num {
float:right;
margin-top:10px;
}
#imgList .num ul li{
width:16px;
height:16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border:1px solid white;
margin-right:6px;
}
#imgList .num ul li a{
display:block;
width:16px;
height:16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border:1px solid white;
margin-right:6px;
}
#imgList .num ul li a:hover{
cursor:pointer;
background-color:pink;
}
#button .pre{
width:60px;
height:80px;
background-color:rgba(0,0,0,0.5);
color:white;
font-size:40px;
text-align:center;
line-height:80px;
vertical-align: middle;
font-weight:bold;
float:left;
margin-top:170px;
}
.pre,.next{
display:none;
}
.pre:hover,.next:hover{
cursor:pointer;
}
#button .next{
width:60px;
height:80px;
background-color:rgba(0,0,0,0.5);
color:white;
font-size:40px;
text-align:center;
line-height:80px;
vertical-align: middle;
font-weight:bold;
float:right;
margin-top:170px;
margin-right:-94px;
}
#imgList .img ul li{
width:730px;
height:420px;
background-image:url("s1.jpg");
}
.class{
background-color:pink;
}
<
>
推荐阅读
- JavaScript|web前端入门到实战（好用的Js图表库）
- 接口访问加密方式
- 实用技术|Chrome 技术篇-常用web调试手法（清除缓存并硬性重新加载）
- 有关easyUI的拖动操作中droppable，draggable用法例子
- web前端|CSS科技感四角边框
- ColorBox 演示和说明/API
- SUI 列表 底部无限滚动
- js把时间戳转化为时间
- js jq获取标签的各种方式整理
- WEB前端|用HTML5canvas绘制一个圆环形的进度表示