移动端自适应轮播图--引用TouchSlide

复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
      <meta name="viewport"  content="width=device-width,user-scalable=no">

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

 </head>
<style>
    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;   }
    /* 本例子css -------------------------------------- */
    .slideBox{ position:relative; overflow:hidden;  max-width:560px;/* 设置焦点图最大宽度 */ }
    .slideBox .hd{ position:absolute; height:28px; line-height:28px; bottom:0; right:0; z-index:1; }
    .slideBox .hd li{ display:inline-block; width:5px; height:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#333; text-indent:-9999px; overflow:hidden; margin:0 6px;   }
    .slideBox .hd li.on{ background:#fff;  }
    .slideBox .bd{ position:relative; z-index:0; }
    .slideBox .bd li{ position:relative; text-align:center;  }
    .slideBox .bd li img{ background:url(images/loading.gif) center center no-repeat;  vertical-align:top; width:100%;/* 图片宽度100%，达到自适应效果 */}
    .slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* 去掉链接触摸高亮 */
    .slideBox .bd li .tit{ display:block; width:100%;  position:absolute; bottom:0; text-indent:10px; height:28px; line-height:28px; background:url(images/focusBg.png) repeat-x; color:#fff;  text-align:left;  }

</style>
 <body>






              <div id="slideBox" class="slideBox">
                <div class="bd">
                    <ul>
                            <li>
                                <a class="pic" href="#"><img src="images/1.jpg" /></a>
                                <a class="tit" href="#">墨西哥教师罢工 与警察激烈冲突</a>
                            </li>
                            <li>
                                <a class="pic" href="#"><img src="images/2.jpg"/></a>
                                <a class="tit" href="#">日右翼游行纪念钓岛"国有化"周年</a>
                            </li>
                            <li>
                                <a class="pic" href="#"><img src="images/3.jpg"/></a>
                                <a class="tit" href="#">女兵竞选美国小姐鼓励女性自强</a>
                            </li>

                    </ul>
                </div>

                <div class="hd">
                    <ul></ul>
                </div>
            </div>
            <script type="text/javascript">
                TouchSlide({ 
                    slideCell:"#slideBox",
                    titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
                    mainCell:".bd ul", 
                    effect:"leftLoop", 
                    autoPage:true,//自动分页
                    autoPlay:true, //自动播放
                    delayTime:200,//切换需要
                    interTime:5000//5秒切一次
                });
            </script>


 </body>
</html>
复制代码

例子

https://files.cnblogs.com/files/hackermi/%E7%A7%BB%E5%8A%A8%E8%87%AA%E9%80%82%E5%BA%94%E5%88%87%E6%8D%A2%E5%9B%BE.zip

我擦cnblogs 不可以上传例子压缩包呀

 

posted on   hackermi  阅读(568)  评论(0)  编辑  收藏  举报

努力加载评论中...

导航

点击右上角即可分享
微信分享提示