老师请问一下

来源：1-13 作业题

远小远

2019-01-06 16:29:06

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!--主体区域-->
    <div class="main">
        <!--轮播图区域-->
        <div class="banner">
            <a href="#">
                <img src="img/1.jpg" class="banner-slide slide-active">
            </a>
            <a href="#">
                <img src="img/2.jpg" class="banner-slide">
            </a>
            <a href="#">
                <img src="img/3.jpg" class="banner-slide">
            </a>
            <a href="#">
                <img src="img/4.jpg" class="banner-slide">
            </a>
            <a href="#">
                <img src="img/5.jpg" class="banner-slide">
            </a>
        </div>
        <!--上一张，下一张按钮-->
        <div class="btn pre"></div>
        <div class="btn next"></div>
        <!--圆点按钮-->
        <div class="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>

/*清除默认样式*/
*{
    margin:0;
    padding:0;
}
body{
    font-family: "微软雅黑";
    color:#14191e;
}
ul li{
    list-style: none;
}

/*图片轮播样式*/
.main{
    width:1200px;
    height: 460px;
    border:10px solid #bbb;
    margin:150px auto;
    overflow: hidden;
}
.banner{
    width:1200px;
    height:460px;
    overflow:hidden;
    position: relative;
}
.banner-slide{
    width: 1200px;
    height:460px;
    display: none;
    background-repeat: no-repeat;
    position: absolute;
}
.banner .slide-active{
    display:block;
}

/*上一张，下一张按钮样式*/
.btn{
    width: 40px;
    height:80px;
    position:absolute;
    top:50%;
    margin-top:-40px;
}
.btn:hover{
    background-color:#333;
    opacity: 0.6;
    filter:alpha(opacity=60);
}
.pre{
    background-image:src(../img/pre2.png) no-repeat center center;
}
.next{
    right:0;
    background-image: url(../img/pre.png) no-repeat center center;
}

写到这发现上下一张切换按钮就是出不来咋回事呢。。。

写回答

2回答