制作简单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!打完收工。
相关阅读: