轮播(冲突可用iframe引入)

来源:互联网 发布:浮生知星辰txt百度云 编辑:程序博客网 时间:2024/06/06 14:13
<script src="js/TouchSlide.1.1.js"></script>
<style type="text/css">
/* 本例子css -------------------------------------- */
.objfocus{ width:380px; height:180px;  margin:0 auto; position:relative; overflow:hidden;   }
.objfocus .hd{ width:100%; height:11px;  position:absolute; z-index:1; bottom:5px; text-align:center;  }
.objfocus .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;
}
.objfocus .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;   }
.objfocus .hd ul .on{ background:#FE6C9C;  }


.objfocus .bd{ position:relative; z-index:0; }
.objfocus .bd li img{ width:100%;  height:140px; background:url(images/loading.gif) center center no-repeat;  }
.objfocus .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */  }

</style>
<!-- 本例主要代码 Start ================================ -->
<div id="objfocus" class="objfocus">
<div class="hd">
<ul></ul>
</div>
<div class="bd">
<ul>
<li><a href="#"><img _src="images/m1.jpg" 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:"#objfocus",
titCell:".hd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层
mainCell:".bd ul", 
effect:"left", 
autoPlay:true,//自动播放
autoPage:true, //自动分页
switchLoad:"_src" //切换加载,真实图片路径为"_src" 
});
</script>
0 0