对于实现效果来说,插件的办事效率真的是太高了,而且里边也被处理过兼容性,用起来实在是特别方便,现在我们来说说大话主席中的slide插件,它分为pc端(superslide)和移动端(touchslide)。

superslide:

  1、引用jQuery.js 和 jquery.SuperSlide.js

因为SuperSlide是基于jQuery的插件,所以前提必须先引用jQuery,再引用SuperSlide

1 <head>
2     <script type="text/javascript" src="../jquery1.42.min.js"></script>
3     <script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>
4 </head>

  2、编写HTML

以下是默认的HTMl结构,分别是 ".hd" 里面包含ul, ".bd" 里面包含ul

 1 <div class="slideTxtBox">
 2     <div class="hd">
 3         <ul><li>教育</li><li>培训</li><li>出国</li></ul>
 4     </div>
 5     <div class="bd">
 6         <ul>
 7             <li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布!</a></li>
 8             ...
 9         </ul>
10         <ul>
11             <li><a href="http://www.SuperSlide2.com" target="_blank">名师教作文:3妙招巧写高分</a></li>
12             ...
13         </ul>
14         <ul>
15             <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
16             ...
17         </ul>
18     </div>
19 </div>

  3、编写CSS,为HTML赋予样色

认真检查您的css,保证兼容大部分浏览器前提下再调用SuperSlide

1 .slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
2 .slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative; }
3 .slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
4 .slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
5 .slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
6 .slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
7 .slideTxtBox .bd li{ height:24px; line-height:24px;   }
8 .slideTxtBox .bd li .date{ float:right; color:#999;  }

  4、调用SuperSlide

因为是默认HTML结构,所以参数都为默认值,不用填写titCell、mainCell等。

1 <script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>

下边便是我利用这样的方法写的一个轮播图

  1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8   <style>
  9     * {
 10       margin: 0;
 11       padding: 0;
 12       list-style: none;
 13     }
 14
 15     #box {
 16       width: 500px;
 17       height: 300px;
 18       position: relative;
 19       margin: 100px auto;
 20     }
 21
 22     .hd {
 23       position: absolute;
 24       height: 100%;
 25       width: 100%;
 26     }
 27
 28     .hd_ul {
 29       height: 10px;
 30       position: absolute;
 31       bottom: 40px;
 32       left: 50%;
 33       transform: translateX(-50%);
 34       -webkit-transform: translateX(-50%);
 35       padding: 5px;
 36       border-radius: 10px;
 37       background-color: rgba(255, 255, 255, .5);
 38       z-index: 2;
 39     }
 40
 41     .hd_ul li {
 42       float: left;
 43       background-color: #fff;
 44       border-radius: 50%;
 45       width: 10px;
 46       height: 10px;
 47       margin: 0 5px;
 48     }
 49
 50     .hd_ul li.on {
 51       background-color: hotpink;
 52     }
 53
 54     .bd_ul{
 55       position: relative;
 56       z-index: 1;
 57     }
 58     .bd,
 59     .bd_ul,
 60     .bd_ul li,
 61     .bd_ul img {
 62       width: 100%;
 63       height: 100%;
 64       overflow: hidden;
 65     }
 66
 67     .prev,
 68     .next {
 69       width: 50px;
 70       height: 100px;
 71       font-size: 50px;
 72       line-height: 98px;
 73       text-align: center;
 74       position: absolute;
 75       top: 50%;
 76       transform: translateY(-50%);
 77       z-index: 2;
 78     }
 79
 80     .prev:hover,
 81     .next:hover {
 82       background-color: rgba(200, 200, 200, .5);
 83       color: #fff;
 84     }
 85
 86     .prev {
 87       left: 0
 88     }
 89
 90     .next {
 91       right: 0;
 92     }
 93
 94     .tempWrap{
 95       height: 100%;
 96     }
 97
 98     .clearfix:after {
 99       content: "";
100       width: 0;
101       height: 0;
102       display: block;
103       line-height: 0;
104       clear: both;
105       visibility: hidden;
106     }
107
108     .clearfix {
109       zoom: 1;
110     }
111   </style>
112   <script src="./superslide插件案例/jquery1.42.min.js"></script>
113   <script src="./template-web.js"></script>
114   <script src="./superslide插件案例/jquery.SuperSlide.2.1.1.js"></script>
115   <title>superslide</title>
116 </head>
117
118 <body>
119   <div id="box" class="demoBox ">
120     <div class="hd">
121       <ul class="hd_ul">
122         <!-- 坑 -->
123       </ul>
124     </div>
125     <div class="bd">
126       <ul class="bd_ul">
127         <!-- 坑 -->
128       </ul>
129     </div>
130     <div class="prev">&lt;</div>
131     <div class="next">&gt;</div>
132   </div>
133
134   <script type="text/html" id="hd_tpl">
135     {{each result v i}}
136     <li></li>
137     {{/each}}
138   </script>
139
140   <script type="text/html" id="bd_tpl">
141     {{each result v i}}
142     <li><a href="{{v.link}}"><img src="{{@v.image}}"></a></li>
143     {{/each}}
144   </script>
145
146   <script>
147     $(function () {
148       $.ajax({
149         url: "./json.json",
150         success: function (data) {
151           if (data.status == 200) {
152             //实现点击按钮效果加载
153             var hd_html = template("hd_tpl", data);
154             $(".hd_ul").html(hd_html);
155             //实现bd效果加载
156             var bd_html = template("bd_tpl", data);
157             $(".bd_ul").html(bd_html);
158
159             //slide插件
160             $("#box").slide({
161               mainCell: ".bd_ul",
162               effect: "leftLoop",
163               autoPlay: true,
164               interTime: 1000,
165               delayTime: 500,
166               trigger: "click",
167               scroll: 1
168             });
169           }
170         }
171       });
172     });
173   </script>
174 </body>
175
176 </html>

  其中的api可以参考官网:http://www.superslide2.com/param.html

touchslide:

  1、引用TouchSlide.js

具体路径自行设置。

1 <head>
2     <script type="text/javascript" src="../TouchSlide.1.0.js"></script>
3 </head>

  2、编写HTML

以下是默认的HTMl结构,分别是 ".hd" 里面包含ul, ".bd" 里面包含ul

 1 <div id="leftTabBox" class="tabBox">
 2     <div class="hd">
 3         <ul>
 4             <li>国内</li>
 5             <li>国际</li>
 6             <li>时事</li>
 7         </ul>
 8     </div>
 9     <div class="bd">
10             <ul>
11                 <li><a href="#">官方明确感染H7N9高危人群</a></li>
12                 ...
13             </ul>
14             <ul>
15                 <li><a href="#">日:沈阳军区部队开赴中朝边境</a></li>
16                 ...
17             </ul>
18             <ul>
19                 <li><a href="#">农业占GDP低政府支持力度大</a></li>
20                 ...
21             </ul>
22     </div>
23 </div>

  3、编写CSS,为HTML赋予样色

因为现在大部分手机浏览器都支持 html5,所以你的css兼容chrome就无大问题了

1 .tabBox .hd{ height:40px; line-height:40px; padding:0 10px; font-size:20px; background:#f4f4f4; border-bottom:1px solid #F5AB38; position:relative;  }
2 .tabBox .hd ul{ position:absolute; height:41px; top:0; overflow:hidden;  }
3 .tabBox .hd ul li{ float:left; padding:0 10px; color:#666;  }
4 .tabBox .hd ul .on{ border:2px solid #F5AB38; border-bottom-color:#fff; background:#fff; color:#CF7F21;   }
5 .tabBox .bd ul{ padding:10px 0 10px 10px;  }
6 .tabBox .bd li{ height:33px; line-height:33px;   }
7 .tabBox .bd li a{ color:#666;  }

  4、调用TouchSlide

在本例中,请在 “.tabBox” div结束后立刻调用 TouchSlide,这样会得到最好的效果,避免整个页面加载后再调用 TouchSlide;
因为是默认HTML结构,所以参数都为默认值,不用填写titCell、mainCell等。

1 <script type="text/javascript">TouchSlide({ slideCell:"#leftTabBox" });</script>

  下边便是我利用这样的方法写的一个手机端小案例

  1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8   <style>
  9     * {
 10       margin: 0;
 11       padding: 0;
 12       list-style: none;
 13     }
 14
 15     .box .hd {
 16       height: 40px;
 17       line-height: 40px;
 18       padding: 0 10px;
 19       font-size: 20px;
 20       background: #F3F3F3;
 21       border-top: 2px solid #CECECE;
 22     }
 23
 24     .box .hd ul {
 25       overflow: hidden;
 26     }
 27
 28     .box .hd ul li {
 29       float: left;
 30       margin: 0 10px;
 31       color: #515151;
 32     }
 33
 34     .box .hd ul .on {
 35       border-bottom: 2px solid #BA2636;
 36       color: #BA2636;
 37     }
 38
 39     .box .hd ul .on a {
 40       display: block;
 41       /* 修复Android 4.0.x 默认浏览器当前样色无效果bug */
 42     }
 43
 44     .box .bd ul {
 45       padding: 10px 0 10px 10px;
 46     }
 47
 48     .box .bd li {
 49       height: 33px;
 50       line-height: 33px;
 51     }
 52
 53     .box .bd a {
 54       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 55     }
 56     /* 去掉链接触摸高亮 */
 57
 58     .box .bd li a {
 59       color: #555;
 60     }
 61   </style>
 62   <script src="./touchslide官网案例/TouchSlide.1.1.js"></script>
 63   <title>touchslide</title>
 64 </head>
 65
 66 <body>
 67   <div id="box" class="box">
 68     <div class="hd">
 69       <ul>
 70         <li>国内</li>
 71         <li>国际</li>
 72         <li>时事</li>
 73       </ul>
 74     </div>
 75     <div class="bd" id="content">
 76       <div class="con">
 77         <ul>
 78           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 79           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 80           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 81           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 82           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 83           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 84           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 85           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 86           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 87           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 88           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 89           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 90           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 91           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 92           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 93           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 94           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 95           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 96           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 97           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 98           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
 99           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
100           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
101           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
102           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
103           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
104           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
105           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
106           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
107           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
108           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
109           <li><a href="javascript:void(0)">官方明确感染H7N9高危人群</a></li>
110         </ul>
111       </div>
112       <div class="con">
113         <ul>
114           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
115           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
116           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
117           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
118           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
119           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
120           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
121           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
122           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
123           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
124           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
125           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
126           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
127           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
128           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
129           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
130           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
131           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
132           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
133           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
134           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
135           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
136           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
137           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
138           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
139           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
140           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
141           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
142           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
143           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
144           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
145           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
146           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
147           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
148           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
149           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
150           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
151           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
152           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
153           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
154           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
155           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
156           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
157           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
158           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
159           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
160           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
161           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
162           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
163           <li><a href="javascript:void(0)">日:沈阳军区部队开赴中朝边境</a></li>
164         </ul>
165       </div>
166       <div class="con">
167         <ul>
168           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
169           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
170           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
171           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
172           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
173           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
174           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
175           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
176           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
177           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
178           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
179           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
180           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
181           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
182           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
183           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
184           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
185           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
186           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
187           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
188           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
189           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
190           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
191           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
192           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
193           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
194           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
195           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
196           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
197           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
198           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
199           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
200           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
201           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
202           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
203           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
204           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
205           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
206           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
207           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
208           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
209           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
210           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
211           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
212           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
213           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
214           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
215           <li><a href="javascript:void(0)">农业占GDP低政府支持力度大</a></li>
216         </ul>
217       </div>
218     </div>
219   </div>
220   <script>
221     TouchSlide({
222       slideCell: "#box",
223       // autoPlay:true  //自动轮播
224       endFun: function (i) { //高度自适应
225         var bd = document.getElementById("content");
226         bd.parentNode.style.height = bd.children[i].children[0].offsetHeight   "px";
227         if (i > 0) bd.parentNode.style.transition = "300ms";//添加动画效果
228       }
229     });
230   </script>
231 </body>
232
233 </html>

  其中的api方法可参考官网:http://www.superslide2.com/TouchSlide/param.html

更多专业前端知识,请上 【猿2048】www.mk2048.com

大话主席(superslide和 touchslide)插件的使用相关推荐

  1. TouchSlide - 大话主席

    http://www.superslide2.com/TouchSlide/downLoad.html 首  页如何使用查看参数案例演示下载页面交流反馈SuperSlide TouchSlide - ...

  2. SuperSlide轮播插件滚动高度或宽度不对的问题解决

    声明:本文由w3h5原创,转载请注明出处:SuperSlide轮播插件滚动高度或宽度不对的问题解决 SuperSlide 是一款比较实用的轮播插件,网站上常用的"焦点图/幻灯片"& ...

  3. SuperSlide 大话主席动态加载数据的方法

    1.外部定义 var slides;//轮播对象 var slidesRun = true;//默认设置第一次加载轮播数为true,后面的次数为false 2.方法调用的时候 appObj.$next ...

  4. TouchSlide 插件使用介绍

    TouchSlide(PC端插件http://www.superslide2.com/demo.html#effect1) 可用于javascript触屏滑动特效插件,移动端滑动特效,触屏焦点图,触屏 ...

  5. SuperSlide、TouchSlide 解决网站大部分特效展示问题

    查看原文 查看在线演示Demo和更多原文内容教程: http://www.ibloger.net/article/1220.html SuperSlide 致力于解决网站大部分特效展示问题,使网站代码 ...

  6. 【大话QT之四】ctkPlugin插件系统实现项目插件式开发

    插件式开发体会: 自开始写[大话QT]系列就开始接触渲染客户端的开发,说是开发不如更多的说是维护以及重构,在接手这块的东西之前自己还有点犹豫,因为之前我一直认为客户端嘛,没什么技术含量,总是想做比较有 ...

  7. 手机站点动态效果插件TouchSlide

    今天看到TouchSlide插件,觉得非常不错,关于使用情况请看demo,下载地址:http://www.superslide2.com/TouchSlide/downLoad.html 转载于:ht ...

  8. 前端资源大杂烩(插件、工具、教程)

    angular 框架教程 https://github.com/johnpapa/angular-styleguide/blob/master/a1/i18n/zh-CN.md ionic入门教程 h ...

  9. Vue-SuperSlide(SuperSlide component for Vue)

    Vue-SuperSlide Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本,API 配置及使用方法与 SuperSlide 几乎一致,让你能够便捷的在 ...

最新文章

  1. oracle反调试,突破前端反调试--阻止页面不断debugger
  2. 请求对象Request
  3. PAT (Basic Level) Practise 1045 快速排序(离散化+主席树区间内的区间求和)
  4. 方便好用的Database Mail - SQL2005
  5. oracle 数据库由Linux平台向Windows平台迁移
  6. 有哪些行业或生意是电商无法取代的?
  7. react项目中遇到的坑
  8. 【数据结构笔记13】C实现:判别是否是同一颗二叉搜索树(BST)
  9. 从零开始的全栈工程师——html篇1.4
  10. java 修改分辨率_JAVA程序分辨率修改及自适屏修改
  11. 大数据可视化工程师岗位要求包括哪些?
  12. 《伯克毕生发展心理学3》
  13. 实现在线预览 pdf 以及添加水印
  14. Nvidia TX2 使用Intelrealsense L515 并安装 RTABmap建图包编译成功
  15. 【英语学习工具】解说 LeHoCat 提供免费的 视频集制作工具 使用方法, 看视频学英语的制作工具, 制作英语教学课件的工具, 帮助自学英语(详细图文解说)
  16. AI_综述----图像分割综述
  17. Android 11.0 Camera2 默认选择拍照尺寸修改及流程分析
  18. solr dih有子查询时速度慢
  19. iOS滚动的导航条(仿网易新闻)
  20. 作业辅导视频 SS2023-HW13:最小相位系统

热门文章

  1. QuickERM仲跻亮:教育行业O2O可以这么玩
  2. 台式机和笔记本 如何选择
  3. scss是什么?安装使用步骤是?有哪几大特性?
  4. 如何快速计算出星期几
  5. 边坡工程监测的内容和方法一览表
  6. bootp服务器linux,Linux bootp和tftp设置
  7. 01-微发试验台-如何打开tdms文件?以及转换成matlab格式
  8. 学习笔记(03):学校网管员培训视频教程-以太网的发展
  9. sss Jenkins+Github持续集成
  10. 数据库的3种删除方法