制作简单jQuery插件实现图片轮播
在之前介绍过一个图片轮播Javascript脚本，相比于今天要介绍的，那个Javascript代码写得太复杂，而且jQuery图片展示功能也比较弱。这个图片轮播jQuery插件是我见过最简单的一个，先看下效果>>，下面来详细说明下使用方法。
这个图片轮播效果js是大名鼎鼎的林木木写得，原文在这里>>。要实现的效果也很明确：自动获取对象列表中第一个元素的宽度，然后列表整体向左平移，再把第一个元素绑定到列表最后去；可以再加个鼠标移到列表上停止平移，移开则恢复。
下面结合本人使用经历，写个制作简单jQuery插件实现图片轮播的教程。
1、加载jquery库。现在theme普遍都有加载jquery库，如加载可掠过该步。没有加载的打开自己当前主题文件下的 header.php 在<head>标签里加上如下代码。
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/lib/jquery-1.4.2.min.js"></script>
不过上面这段代码需要下载 jquery-1.4.2.min.js 放到自己的主机上。如果你不想太劳驾自己的主机，我建议你加载 google 提供的，添加如下的语句到<head>标签里就可以了：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
2、在主题的适当位置加入HTML结构代码。
<div id="scrollbox"> <ul> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> </ul> </div>
3、CSS美化，添加下面的代码到主题 style.css 里。
#scrollbox{width:500px;height:240px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #000;}
#scrollbox ul {width:900px;height:280px;position:absolute;padding:10px 0;}
#scrollbox li {float:left;position:relative;margin:0 10px;border:1px solid #000;}
4、最重要的文件来了，jQuery核心代码。
function scrollBox(){
var first = $(‘#scrollbox ul li:first’);
var width = -(first.outerWidth(true)) + ‘px’;
$(‘#scrollbox ul’).animate({left:width},{
duration:600,
complete:function(){
$(‘#scrollbox ul’).append(first).css(“left”,”0″);
}
});
};
$(document).ready(function(){
myScroll = setInterval(scrollBox,1500);
$(‘#scrollbox’).hover(function(){
clearInterval(myScroll);
},function(){
myScroll = setInterval(scrollBox,1500);
}
);
})
</script>
ok！打完收工。
相关阅读:
