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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,306评论 0 3
  • Home 关于Gitee Gitee 是开源中国社区[http://www.oschina.net]团队基于开源项...
    奋拓达阅读 2,283评论 0 3
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,606评论 0 7
  • 视图: 什么是视图,视图其实就是一条sql语句,他就是一条查询语句,可以把一条很长的sql语句包装一下,视图也能删...
    凯哥学堂阅读 309评论 0 0
  • 不管活到了什么年纪,都有对爱情的向往与追求。 原来,最漂亮的女人,除了年轻的容貌,较好的身材,还要有生活阅历的积淀...
    糯米团阅读 246评论 0 0