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

引用js

<script src="../js/TouchSlide.1.1.js"></script>

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部分

<div id="focus" class="focus">
        <div class="hd">
            <ul></ul>
        </div>
        <div class="bd">
            <ul>
                <li><a href="#"><img _src="images/lunbo2.png" src="images/blank.png" /></a></li>
                <li><a href="#"><img _src="images/m2.jpg" src="images/blank.png"/></a></li>
                <li><a href="#"><img _src="images/m3.jpg" src="images/blank.png"/></a></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        TouchSlide({ 
            slideCell:"#focus",
            titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
            mainCell:".bd ul", 
            effect:"left", 
            autoPlay:true,//自动播放
            autoPage:true, //自动分页
            switchLoad:"_src" //切换加载，真实图片路径为"_src" 
        });
    </script>

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