宝宝健康成长网首页刘易桉宝宝健康成长 林林微博 育儿护理知识 宝宝网址导航
当前位置: 首页 >> 宝宝建站 >> 制作简单jQuery插件实现图片轮播

制作简单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核心代码。

<script type=”text/javascript”>

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!打完收工。

敬请留言当前共有 5 条评论

  1. zwwooooo 说道:

    核心是setInterval函数,间隔一段时间后重复执行函数

  2. 宝宝健康成长 说道:

    大师就是大师,受教了

  3. zwwooooo 说道:

    不是大师,是刚好折腾使用了这个函数

  4. biotechgo.net的文章总是这么有感觉,谢谢分享了。

  5. 固定图片
    不能自动提取最新图片
    不好

发表评论

^留言没头像?教你设置头像!
我的应用 [email protected] 宝宝问答>  0-1岁  1-3岁  3-6岁 手气不错