TouchSlide 插件使用介绍

TouchSlide可用于javascript触屏滑动特效插件,移动端滑动特效,触屏焦点图,触屏Tab切换,触屏多图切换等方法引用(本次用轮播图为例):

Js引入:

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; } .focus { width: 100%; 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); /* 取消

比丘资源网 » TouchSlide 插件使用介绍

发表回复

提供最优质的资源集合

立即查看 了解详情