当前位置: 首页 > 工具软件 > TouchSlide > 使用案例 >

大话主席(superslide和 touchslide)插件的使用

太叔乐家
2023-12-01

  对于实现效果来说,插件的办事效率真的是太高了,而且里边也被处理过兼容性,用起来实在是特别方便,现在我们来说说大话主席中的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

转载于:https://www.cnblogs.com/xiaoyaoxingchen/p/8385960.html

 类似资料: