制做简单jQuery插件实现图片轮播

时间 2019-11-12

原文原文链接

这个图片轮播效果js是大名鼎鼎的林木木写得，原文在这里 >>。要实现的效果也很明确：自动获取对象列表中第一个元素的宽度，而后列表总体向左平移，再把第一个元素绑定到列表最后去；能够再加个鼠标移到列表上中止平移，移开则恢复。下面结合本人使用经历，写个制做简单jQuery插件实现图片轮播的教程。一、加载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> 二、在主题的适当位置加入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> 三、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;} 四、最重要的文件来了，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>