对于实现效果来说，插件的办事效率真的是太高了，而且里边也被处理过兼容性，用起来实在是特别方便，现在我们来说说大话主席中的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">名师教作文：３妙招巧写高分</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{ 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 500px; 17 height: 300px; 18 position: relative; 19 margin: 100px auto; 20 } 21 22 .hd { 23 position: absolute; 24 height: 100%; 25 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 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 100%; 63 height: 100%; 64 overflow: hidden; 65 } 66 67 .prev, 68 .next { 69 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 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"><</div> 131 <div class="next">></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