/*---------slideshow--------------------*/
.slideShow {
    width: 230px;
    height: 210px; /*其实就是图片的高度*/
    margin: 10px auto;
    position: relative;
    overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}

    .slideShow ul {
        list-style: none;
        width: 20000px;
        position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
    }

        .slideShow ul li {
            float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
            width: 230px;
        }

            .slideShow ul li img {
                width: 100%;
                height:240px;
            }

    .slideShow .showNav { /*用绝对定位给数字按钮进行布局*/
        position: absolute;
        right: 10px;
        bottom: 5px;
        text-align: center;
        font-size: 12px;
        line-height: 20px;
    }

        .slideShow .showNav span {
            cursor: pointer;
            display: block;
            float: left;
            width: 5px;
            height: 5px;
            background: #ccc;
            margin-left: 2px;
            color: #fff;
            border-radius: 20px;
            font-size:1px;
        }

        .slideShow .showNav .active {
            background: #009675;
        }
/*---------slideshow end--------------------*/
/*---------slideshow1--------------------*/
.slideShow1 {
    width: 230px;
    height: 210px; /*其实就是图片的高度*/
    margin: 10px auto;
    position: relative;
    overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}

    .slideShow1 ul {
        list-style: none;
        width: 20000px;
        position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
    }

        .slideShow1 ul li {
            float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
            width: 230px;
            position:relative;
        }
            .slideShow1 ul li span {
                position: absolute;
                left: 0px;
                top: 190px;
                z-index: 999;
                display: block;
                text-align: left;
                color: #fff;
                background: rgba(0,0,0,.3);
                width:100%;
            }
            .slideShow1 ul li img {
                width: 240px;
                height: 240px;
            }

    .slideShow1 .showNav { /*用绝对定位给数字按钮进行布局*/
        position: absolute;
        right: 10px;
        bottom: 5px;
        text-align: center;
        font-size: 12px;
        line-height: 20px;
    }

        .slideShow1 .showNav span {
            cursor: pointer;
            display: block;
            float: left;
            width: 5px;
            height: 5px;
            background: #ccc;
            margin-left: 2px;
            color: #fff;
            border-radius: 20px;
            font-size: 1px;
        }

        .slideShow .showNav .active {
            background: #009675;
        }
/*---------slideshow1 end--------------------*/