Explain
第一步:引入压缩包解压后文件夹中的jquery-2.1.1.min.js文件,js.js文件,styel.css文件。
第二步:复制张贴以下内容到你需要的地方。建议在外再加一个div包裹层,以定位到你需要的地方。注意提示部分.
<div id="container">
<div id="list">
<a href="#"><img src="images/b4.jpg" /></a> <!--请注意这一张图片要和你打算的最后一张图片一样--->
<a href="#"><img src="images/b0.jpg" /></a>
<a href="#"><img src="images/b1.jpg" /></a>
<a href="#"><img src="images/b2.jpg" /></a>
<a href="#"><img src="images/b3.jpg" /></a>
<a href="#"><img src="images/b4.jpg" /></a>
<a href="#"><img src="images/b0.jpg" /></a> <!--请注意这一张图片要和你打算的第一张图片一样--->
</div>
<div id="buttons">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span> <!--请注意这里的span标签数量要和你的实际显示的幻灯片数量一致,这里是5个,对应上面1--5张图片--->
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
第三步:复制张贴以下调用代码。
window.onload=function(){
focus_picture(5,1000,400,4000,500,1);
}
参数可更改,第1个参数代表实际显示的幻灯片数量,这里是5个。
第2个参数代表图片宽度,也就是焦点图宽度。
第3个参数代表图片高度,也就是焦点图高度。
第4个参数代表自动切换时间。
第5个参数代表切换速度。
第6个参数若为1,则代表切换方向从右到左(大部分都是如此);
若为0,则代表切换方向从左到右;
其他补充:若不需要边框可到以下代码中把边框去掉。
若想修改小圆点的样式可到css文件中修改。
总之,可随意修改。
因本人为初学者,水平不高,以前从未写过插件,所以第一次写难免不规范,功能也比较简单,bug是难免的,适合要求不高者使用,当然您可以修改完善,那是极好的。