要引用jquery,TouchSlide.1.1.js
html:
<div id="slideBox" class="slideBox">
<div class="lb">
<ul >
<li>
<a class="pic" href="#">
<img src="../../images/act-all/jiayu-new/lb01.jpg">
</a>
</li>
<li>
<a class="pic" href="#">
<img src="../../images/act-all/jiayu-new/lb02.jpg">
</a>
</li>
</ul>
</div>
<div class="myhd">
<div class="positon-re">
<ul style="height: 50px;" class="lbul"></ul>
<span class="alllb">/9</span>
</div>
</div>
</div>
css:
/* 焦点图 */
.slideBox{ position:relative; overflow:hidden; margin:0 auto; max-width:560px;/* 设置焦点图最大宽度 */}
.slideBox .myhd{ position:absolute; height:40px;width:40px; line-height:40px; top:10px; right:8px; z-index:1;background-color: rgba(0, 0, 0, 0.5);border-radius: 6px;}
.slideBox .myhd li{display: none; width:20px; height:40px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:#fff; overflow:hidden; }
/*点*/
.lbul{height: 28px;width:16px;text-align:center;display:inline-block;overflow: hidden;z-index: 10000;}
.slideBox .myhd li.on{ display: inline-block; }
.slideBox .lb{ position:relative; z-index:0; }
.slideBox .lb li{ position:relative; text-align:center;color:#fff; }
.slideBox .lb li img{ vertical-align:top; width:100%;min-height:100px;max-height:320px;/* 图片宽度100%,达到自适应效果 */}
.slideBox .lb li a{ -webkit-tap-highlight-color:rgba(0,0,0,0); text-decoration: none; } /* 去掉链接触摸高亮 */
.slideBox .lb li .tit{ display:block; width:100%; position:absolute; bottom:0; text-indent:10px; height:28px; line-height:28px;color:#fff; text-align:left;}
.positon-re{position:relative;}
.alllb{color:#fff;position:absolute;}
javascript:
TouchSlide({
slideCell: “#slideBox”,
titCell: “.myhd ul”, //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层
mainCell: “.lb ul”,
effect: “leftLoop”,
autoPage: true, //自动分页
autoPlay: true, //自动播放
});