滑动css

/* css 重置 */
body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight:normal; }
img { border:0; margin: 0; padding: 0;   }
body { color: #000; -webkit-user-select: none; -webkit-text-size-adjust: none; font:normal 16px/200% "微软雅黑", helvetica, arial; text-align:left;   }
header, section, footer { display: block; margin: 0; padding: 0 }
a{text-decoration:none;color:#000;}

body{ background:#f4f4f4;  }




/* 内容 */
#content{ padding:10px 0; background:#fff;  }
.path{ padding:0 0 5px 5px;   }


/* 本例子css -------------------------------------- */
.picScroll{ margin:10px auto;}
.picScroll .bd ul{ width:100%;  float:left; padding-top:10px;  }
.picScroll .bd li{ width:33%; float:left; font-size:14px; text-align:center;  }








.picScroll .pressbar{position:relative;overflow-x:auto;overflow-y:hidden}
     .picScroll ::-webkit-scrollbar{width:0px}
.picScroll .line{ background:url(./images/split.png) repeat-x 10px 52px}

.picScroll .line ul{display:flex;flex-flow:row nowrap}
.picScroll .pressbar li{position:relative;margin:10px 5px;white-space:nowrap}




    
.on:after{
    position:absolute;
    display: block;
    content: "";
    bottom:-18px;
    left:30px;
    overflow:hidden;
    width:13px;
    height:13px;
    background:white;
    border: 2px solid #EBF1F5;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);


/*    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #B97878;*/
}


.number {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    text-align: center;
    border-radius: 12px;
    background: #eee;
}
.on .number {
    background: #d58d6d;
}