製做簡單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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。