本文實(shí)例講述了jQuery+css實(shí)現(xiàn)的切換圖片功能代碼。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
具體代碼如下：
<!DOCTYPE html><html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css" > body { margin:0; padding:0; } .container { border:6px solid gray; background:black; width:600px; height:400px; position:relative; left:50%; margin-left:-300px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; overflow:hidden; } .text-center { text-align:center; } h1 { font-size:50px; color:gray; font-weight:bolder; } .imgUL { width:100%; height:100%; margin:0px; padding:0px; list-style:none; } .imgUL li { float:left; margin:0px; padding:0px; height:100%; color:gray; font-weight:bolder; text-align:center; font-size:100px; line-height:400px; } .pageUL { position:relative; top:-40px; height:40px; list-style:none; margin:0px; padding:0px; float:right; } .pageUL li { float:left; display:block; width:36px; height:36px; border:2px solid red; margin-left:5px; border-radius:4px; -webkit-border-radius:4px; text-align:center; -moz-border-radius:4px; line-height:36px; color:gray; font-weight:bolder; cursor:pointer; } .pageUL li:hover { background:#5ACF00; color:black; } .pageUL li.active { background:#5ACF00; color:black; } </style> <script type="text/javascript" > $(document).ready(function(){ var autoInterval = null, imgUL = $(".imgUL"), imgliList = imgUL.children("li"), liListLength = imgliList.length, pageUL = $('.pageUL'), pageLiList = pageUL.children('li'), pageLiListLength = pageLiList.length, // initialize activePageLi = $(pageLiList[0]); activePageLi.addClass('active'); imgliList.width(600); imgUL.width(liListLength * 600); $(".pageUL li").mouseover(function(){ mouseoverAnimate(this); }).mouseout(function(){ createInterval(); }); createInterval(); function mouseoverAnimate(_this){ clearInterval(autoInterval); activePageLi.removeClass('active'); activePageLi = $(_this); var pageNo = parseInt(activePageLi.html()); activePageLi.addClass('active'); imgUL.animate({ 'marginLeft': -600 * (pageNo - 1) }, 10); } function createInterval(){ autoInterval = setInterval(function(){ var pageNo = parseInt(activePageLi.html()); pageNo++; if(pageNo > pageLiListLength) { pageNo = 1; } activePageLi.removeClass('active'); activePageLi = $(pageLiList[pageNo - 1]); activePageLi.addClass('active'); imgUL.animate({ 'marginLeft': -600*(pageNo - 1) }, 1100); }, 1500); } }); </script> </head> <body> <h1 class="text-center">Demo</h1> <div class="container" id="container"> <ul class="imgUL"> <li>Page1</li> <li>Page2</li> <li>Page3</li> <li>Page4</li> <li>Page5</li> <li>Page6</li> </ul> <ul class="pageUL"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body></html>更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見經(jīng)典特效匯總》及《jQuery動(dòng)畫與特效用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
