h5轮播图大小自适应(touchslide)

引用js


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;  }
    /* 本例子css -------------------------------------- */
    .focus{ width:320px; height:140px;  margin:0 auto; position:relative; overflow:hidden;   }
    .focus .hd{ width:100%; height:11px;  position:absolute; z-index:1; bottom:5px; text-align:center;  }
    .focus .hd ul{ display:inline-block; height:5px; padding:3px 5px; background-color:rgba(255,255,255,0.7); 
        -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-size:0; vertical-align:top;
    }
    .focus .hd ul li{ display:inline-block; width:5px; height:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#8C8C8C; margin:0 5px;  vertical-align:top; overflow:hidden;   }
    .focus .hd ul .on{ background:#FE6C9C;  }

    .focus .bd{ position:relative; z-index:0; }
    .focus .bd li img{ width:100%;  height:140px; background:url(images/loading.gif) center center no-repeat;  }
    .focus .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */  }

html和js部分

    代码参考:https://gitee.com/leifan0327/touchslide.git

    你可能感兴趣的:(h5轮播图大小自适应(touchslide))