javaScript+CSS+html【练习题】轮播图
题目
完成京东官网首页中轮播图效果。点击进入:京东首页
具体要求:
要求每隔 3 秒图片会自动切换一张,以此类推按照给定图片数量轮番切换播放。
当鼠标移入时会自动暂停播放,鼠标移出则会继续。
如下图两边有两个左右方向的按钮,点击则会实现手动切换商品图片。
左下角会按照图片数量显示对应的灰色圆点,点击会显示对应的图片,并圆点加亮显示。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS实现轮播图</title>
<style>
div,img,ul,li{
margin:0px;padding:0px;}
#did{
width:400px;
height:400px;
/*内部采用相对定位*/
position: relative;
/*超出的部分隐藏*/
overflow:hidden;
}
/*页面刚加载时,只显示第一张图片*/
#did img{
display:none;}
#did img:first-child{
display:block}
/* 左右箭头 */
.arrowhead-left,
.arrowhead-right {
position: absolute;
width: 40px;
height: 40px;
font-size: 30px;
line-height: 35px;
text-align: center;
color:white;
background-color: rgba(0,0,0,.2);
border-radius: 20px 20px 20px 20px;
top:180px;/*400/2-40/2*/
cursor: pointer;
}
.arrowhead-right {
left:370px;/*400-30*/
}
.arrowhead-left{
right:370px;/*400-30*/
}
/* 小圆点所在的容器 */
#radius {
position:absolute;
width: 380px;