项目5-web实战上机-11月5号

实验目的：实现轮播图效果

1.实现代码：

html部分：

<!--    轮播图效果-->
    <div class="row">
        <div class="categoryAndBanner">
            <div class="category">
                <!--            分类导航-->
            </div>
            <div class="banner">
                <ul id="slider-content" class="full_screen">
                    <li style="display: block"><img src="img/banner/banner1.jpg"></li>
                    <li><img src="img/banner/banner2.jpg"></li>
                    <li><img src="img/banner/banner3.jpg"></li>
                    <li><img src="img/banner/banner4.jpg"></li>
                    <li><img src="img/banner/banner5.jpg"></li>
                </ul>
                <ul id="slider-nav" class="slider-nav">
                    <li class="on"><a href="javascript:void(0)">1</a></li>
                    <li><a href="javascript:void(0)">2</a></li>
                    <li><a href="javascript:void(0)">3</a></li>
                    <li><a href="javascript:void(0)">4</a></li>
                    <li><a href="javascript:void(0)">5</a></li>
                </ul>
            </div>
        </div>
    </div>
<!--    轮播图end-->

css部分：

/*轮播图*/
.categoryAndBanner{
    position: relative;
    width: 100%;
    height: 500px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.banner,.full_screen{
    width: 100%;
    height: 481px;
    position: relative;
    z-index: 1;
}
/*图片在中间显示*/
.full_screen li{
    width: 1920px;
    height: 100%;
    position: absolute;
    z-index: 1;
    top:0;
    left: 50%;
    margin-left: -960px;
    display: none;
}
/*图片翻页小圆点*/
.banner .slider-nav{
    font-size: 1px;
    list-style: none;
    /*background: rgba(255,255,255,0.2);*/
    text-align: center;
    display: block;
    width: 1190px;
    height: 24px;
    padding: 7px 8px;
    margin-left: -595px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    z-index: 2;
}
/*图片翻页小圆点样式设置*/
.banner .slider-nav li{
    /**/
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    /*让1，2，3，4，5 在同一行 内联块状 */
    display: inline-block;
    list-style: none;
    margin-left: 4px;
    overflow: hidden;
    bottom: 0px;
    z-index: 2;
/*    圆形*/
    width: 24px;
    height: 24px;
    border-radius: 12px;
    /*黑色 透明度0.25*/
    background: rgba(0,0,0,0.25);
}
.banner .slider-nav a{
    display: block;
    width: 100%;
    height: 100%;
    /*text-indent 使a中的文字不显示*/
    text-indent: -99999px;
    padding: 0;
    margin: 0;
}
/*鼠标悬停在小圆点上，li上有class 为 on 的属性 背景为红色*/
.banner .slider-nav li.on{
    background: #FF0000;
}

js部分:

/*轮播图*/
.categoryAndBanner{
    position: relative;
    width: 100%;
    height: 500px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.banner,.full_screen{
    width: 100%;
    height: 481px;
    position: relative;
    z-index: 1;
}
/*图片在中间显示*/
.full_screen li{
    width: 1920px;
    height: 100%;
    position: absolute;
    z-index: 1;
    top:0;
    left: 50%;
    margin-left: -960px;
    display: none;
}
/*图片翻页小圆点*/
.banner .slider-nav{
    font-size: 1px;
    list-style: none;
    /*background: rgba(255,255,255,0.2);*/
    text-align: center;
    display: block;
    width: 1190px;
    height: 24px;
    padding: 7px 8px;
    margin-left: -595px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    z-index: 2;
}
/*图片翻页小圆点样式设置*/
.banner .slider-nav li{
    /**/
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    /*让1，2，3，4，5 在同一行 内联块状 */
    display: inline-block;
    list-style: none;
    margin-left: 4px;
    overflow: hidden;
    bottom: 0px;
    z-index: 2;
/*    圆形*/
    width: 24px;
    height: 24px;
    border-radius: 12px;
    /*黑色 透明度0.25*/
    background: rgba(0,0,0,0.25);
}
.banner .slider-nav a{
    display: block;
    width: 100%;
    height: 100%;
    /*text-indent 使a中的文字不显示*/
    text-indent: -99999px;
    padding: 0;
    margin: 0;
}
/*鼠标悬停在小圆点上，li上有class 为 on 的属性 背景为红色*/
.banner .slider-nav li.on{
    background: #FF0000;
}