<!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>
例子
我擦cnblogs 不可以上传例子压缩包呀