看箭头所示，说明可以自动切换了图片；
可是我们还有当鼠标在右下角1,2,3,4上滑过的时候，可以切换图片，所以我们就在js中加个事件就可以了：
//鼠标经过1、2、3、4的效果 PicObject.find(paging).mouseover(function(){ index = PicObject.find(paging).index($(this)); showPic(index); //调用showPic(index)函数。 }); //鼠标经过1、2、3、4的效果 //清除计时器 //当鼠标悬浮在1,2,3,4上面的时候，就相当于要切换图片了 //所以我们就要清除计时器，重新来过了 PicObject.hover(function(){ clearInterval(time);//这个是相对于setInterva()的； },function(){ if(opts.autoscroll){ time = setInterval(picTimer,opts.Time); }else{ clearInterval(time); } });
把这段代码加如到js中，加到什么位置就不要说了吧！加到
paging.eq(index).addClass('current');
后面就可以了；
这样整个这个图片切换的一个插件就算完成了；
如果需要调用函数，可以修改ele,Timer,autoscroll.
看一下带参数使用插件：
<script type="text/javascript"> $(function(){ $.scrollPic({ ele: '.pic-slider-io', //插件应用div Time:'3000', //自动切换时间 autoscroll:true, //设置是否自动渐变 }); }); </script>
好了，整个插件的讲述就算是完成了，希望大家可以从中学到知识，如有不足，还望谅解！（最后说一句，在整个js的编写时，最好在$(function(){});的最前面加个分号，防止与其他js冲突）
您可能感兴趣的文章: