js幻灯片插件（简单易用）

平时做项目总是会用到幻灯片功能，网上已经有了很多插件，但是都要配置js引用，css样式，html代码，很是麻烦，不好用，或许是自己太懒了，就希望有一款可以尽量少配置代码的slide插件，于是萌发了自己写的念头。

代码提交到了我的GitHub里。

下载地址：https://github.com/mahatmasmile/slide

此插件依赖jquery包。

此插件支持同一个页面多个幻灯片。

具体使用方法如下：

js：

<script src="js/jquery-1.7.0.min.js"></script>
<script src="js/jquery.slide-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
varpicurls={//图片连接
'p1':'img/001.jpg',
'p2':'img/002.jpg',
'p3':'img/003.jpg',
'p4':'img/004.jpg',
'p5':'img/005.jpg',
'p6':'img/001.jpg',
'p7':'img/002.jpg',
'p8':'img/003.jpg',
'p9':'img/004.jpg',
'p10':'img/005.jpg',
};
varurls={//每张图片对应的超链接
'u1':'http://www.baidu.com/s?wd=1',
'u2':'http://www.baidu.com/s?wd=2',
'u3':'http://www.baidu.com/s?wd=3',
'u4':'http://www.baidu.com/s?wd=4',
'u5':'http://www.baidu.com/s?wd=5',
'u6':'http://www.baidu.com/s?wd=6',
'u7':'http://www.baidu.com/s?wd=7',
'u8':'http://www.baidu.com/s?wd=8',
'u9':'http://www.baidu.com/s?wd=9',
'u10':'http://www.baidu.com/s?wd=10',
};
varlabels={//底部黑色标签对应的文本内容
'l1':'图片一',
'l2':'图片二',
'l3':'图片三',
'l4':'图片四',
'l5':'图片五',
'l6':'图片六',
'l7':'图片七',
'l8':'图片八',
'l9':'图片九',
'l10':'图片十',
};
$("#slide_box").slide({//幻灯片层的ID，前面“井”号不能删除
'second':5,//多少秒翻页
'width':600,//每张图片的宽
'height':300,//每张图片的高
'pc':5,//一共多少张图片
'picurls':picurls,//看不懂就别动
'target':'blank',//在新页面打开超链接,默认是本页面
'urls':urls,//看不懂就别动
'labels':labels//看不懂就别动
});
$("#slide_box1").slide({//幻灯片层的ID，前面“井”号不能删除
'second':5,//多少秒翻页
'width':700,//每张图片的宽
'height':350,//每张图片的高
'pc':7,//一共多少张图片
'picurls':picurls,//看不懂就别动
'urls':urls,//看不懂就别动
'labels':labels//看不懂就别动
});
$("#slide_box2").slide({//幻灯片层的ID，前面“井”号不能删除
'second':5,//多少秒翻页
'width':1000,//每张图片的宽
'height':500,//每张图片的高
'pc':10,//一共多少张图片
'picurls':picurls,//看不懂就别动
'urls':urls,//看不懂就别动
'labels':labels//看不懂就别动
});
});
</script>

 

html：

<div id="slide_box" ><!--幻灯片的层1-->
</div> 
                                   
<div id="slide_box1" ><!--幻灯片的层2-->
</div> 
                                   
<div id="slide_box2" ><!--幻灯片的层3-->
</div>

幻灯片（slide_box）层内什么都不用写，全部自动生成。

以上是一个页面三个幻灯片的写法，可以根据自己的需要，增减代码。

这只是初期的，样式和功能比较单一，没有显示效果的选择，也过渡的快慢等等功能。

 

效果：