js网站轮播图怎么做简单？鸡哥教你简单制作效果炫酷

日了狗啦，刚刚鸡哥辛苦码了那么多字全丢了又要重新写，这是第二遍写了...
今天鸡哥给小白写个不需要写js原生代码，只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图，当然js原生代码写着也不算很繁琐，但是有些浪费时间，更何况很多人并不会用js直接写包括鸡哥，当年在学校还是研究过一段时间js的，当时还独自写了一个轮播图俘获了多少同班妹子的芳心，不过现在是基本废了，这东西要常写，不然忘的很快。

唉，本来还有妹子等着鸡哥呢，我这一大意文章丢了，重新写的话估计来不及了，先打个电话让妹子回家吧~~  好了切入主题！

本次教程的原理就是用一个大神写好的插件，里边包含了很多封装好的js函数供我们使用，我们只需引入这个插件和jquery库配合，然后写出规定的html结构，最后再插一段通俗易懂的jquery代码就大功告成了~~ 
大家先百度一下“大话主席”  第一个就是点进去点击下载页面



下载之后是一个本地的网站其实和线上是一样的下载不下载都一样，打开之后点击基础效果，如果想下载扩展效果的话是要付费的，反正也不贵19块钱，就当给作者得辛苦钱（鸡哥是不是要想这货要点广告费啊~~~哈哈哈）



鸡哥截图没截完，其实下边还有很多效果，右侧红框框住的是轮播效果的属性选择，可以生成一段jquery代码（橙色部分代码），就是刚才所说的那段通俗易懂得代码。这段代码在最后是要用到的，我在后边会讲到。
好了，大话主席的插件简单的介绍完了，下边给大家列一下需要得插件：
1：jquery1.42.min.js                                 / jquery库 知道点js的人都懂得
2：jquery.SuperSlide.2.1.1.js                 /  这个就是刚刚介绍得大话主席的插件
这俩插件鸡哥会在大家伙看完文章后在结尾附上下载链接，鸡哥打包好的。
下边鸡哥介绍下这俩文件如何引要放在哪里先看个截图：



如截图，在body结束标签后边引入我们的这俩文件，当然你的路径可能跟我的不一样。
特别注意一下：引入的顺序一定要先引入jquery插件然后引入大话主席插件不然没得效果~~~

知道怎么引入之后大家再看看html的结构怎么写，必须要按照这个结构，不然也没得效果，见下方代码结构。

  <div class="box">      / 此标红类名后边会用到 留意

   <div class="hd">
     <ul><li>1</li><li>2</li><li>3</li></ul>
   </div>

   <div class="bd">
     <ul><li>1.jpg</li><li>2.jpg</li><li>3.jpg</li></ul>
   </div>

  </div>
 

如上述代码：一个大的div包住俩小div，大div类名就是标红地方可以任意起，俩小div是固定的类名，hd就是head的缩写，就是轮播图中的1234之类的按钮。bd缩写就是body，就是轮播图啦。
好了，现在已经基本差不多了就差一个生成的刚刚讲过的那个橙色部分代码了，按照自己想要的效果生成一个代码，然后复制到你引入大话主席代码的下边就ok了，见下方代码：

  jQuery(".box").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:7000,delayTime:1000});
 

标红的地方填的就是刚刚所讲的大div的类名，特别注意前边有个点。
到现在已经基本成了，但是大家还不要忘了给你的html加上css样式哟，怎么样是不是很简单~~~

好了文章到这终于写完了，第二次啊.....可能写的有些粗糙，毕竟现在已经凌晨一点多了，不知各位看官觉得写的怎么样，哪里没写明白请在下方评论中写出，这样及提升了你也提升了我。

感谢浏览啊

原文链接：js网站轮播图怎么做简单？鸡哥教你简单制作效果炫酷