SuperSlide插件的用法

前言

SuperSlide是基于JQuery的一个轮播图插件，使用它可以便捷使用各种样式的轮播图

正文

1.首先使用SuperSlide需要下载js文件

可以通过网址下载：

http://www.superslide2.com/index.html

2.下载完成后解压，会有一个文件夹

3.将里面的js文件导入项目， 代码：

<script src="js/SuperSlide2.1-demo-00/jquery1.42.min.js"></script>
<script src="js/SuperSlide2.1-demo-00/jquery.SuperSlide.2.1.3.js"></script>

基于你自己存放的路径修改，路径不会的可以自行百度很简单

4.使用SuperSlide插件，代码如下：

<div class="slideTxtBox">
    <div class="hd">
        <ul>
        ...
        </ul>
    </div>
    <div class="bd">
        <ul>
            ...
        </ul>
    </div>
</div>

4.1 这是基本html代码，类名可以修改，基本格式是这样 hd里面的ul是用来放轮播图的小圆点（之类的） bd里面的ul是用来放图片，轮播的对象

4.2 样式就用官网的，自己写也可以

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

4.3 js代码如下：

<script type="text/javascript">
	jQuery(".slideTxtBox").slide({
		mainCell: ".bd ul",
        titCell: '.hd ul',
        autoPage: '<li></li>',
        autoPlay: true,
	});
 </script>

代码里面的参数可以去网址查看：

	http://www.superslide2.com/param.html

这里说一些基本使用的参数： jquery（放最外层大盒子的类名）.slide({ mainCell：是轮播存放的对象, titCell：分页器存放的对象（小圆点）， autoPlay：自动播放， autoPage:分页器 （默认为true）可以修改为 ‘ 标签 ’， effect：播放效果， interTime：时间间隔

5.最重要的一点，也是我自己在使用时遇到的问题：

在使用过程中代码都是我自己写的，没有搬官网源代码，导致我觉得所有东西都写完了之后，轮播图可以播放，但是小圆点不跟着轮播图的播放进行改变，我找了好久得到结果

	.slideTxtBox .hd ul li.on{   background:#fff; }

css中不管你是怎么写的，基于你自己的ul li 后面跟上.on 这是小园点活跃时的样式，就是小圆点的变化，这个一定要有，不然小圆点是不会动的， ps：.on要连着li

这样基本上你就可以随意使SuperSlide插件啦！！！

本章完