本文實例講述了jQuery實現的自適應焦點圖效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"><title>焦點圖</title><style>* { padding: 0; margin: 0;}img { vertical-align: top; border: 0;}li { list-style: none;}#focus-banner { position: relative; width: 100%; overflow: hidden;}#focus-banner-list { position: relative;}#focus-banner-list li { position: absolute; left: 0; top: 0; width: 100%;}#focus-banner-list li img { width: 100%;}.focus-banner-img { display: block;}#focus-banner-list .focus-banner-text { position: absolute; left: 50%; top: 0; width: 1000px; height: 100%; margin-left: -500px; text-align: center; color: #fff; font-size: 16px; text-align: center;}#focus-banner .focus-handle { position: absolute; top: 50%; margin-top: -40px; z-index: 100; display: block; width: 80px; height: 80px; background-image:url(images/focus_handle.png);}#next-img { left: 0;}#next-img { left: 50px; background-position: 0 0;}#next-img:hover { background-position: 0 -80px;}#prev-img { right: 0;}#prev-img { right: 50px; background-position: -80px 0;}#prev-img:hover { background-position: -80px -80px;}#focus-bubble { position: absolute; left: 50%; bottom: 10px; z-index: 999;}#focus-bubble li { float: left; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border: 1px #fff solid; cursor: pointer;}#focus-bubble li.current { background-color: #fff;}</style></head><body><div id="focus-banner"> <ul id="focus-banner-list"> <li> <a href="#" class="focus-banner-img"> <img src="images/banner2.jpg" alt=""> </a> <div class="focus-banner-text"> <p>這是一句廣告語</p> </div> </li> <li> <a href="#" class="focus-banner-img"> <img src="images/banner3.jpg" alt=""> </a> <div class="focus-banner-text"> <p>這是二句廣告語</p> </div> </li> <li> <a href="#" class="focus-banner-img"> <img src="images/banner4.jpg" alt=""> </a> <div class="focus-banner-text"> <p>這是三句廣告語</p> </div> </li> <li> <a href="#" class="focus-banner-img"> <img src="images/banner5.jpg" alt=""> </a> <div class="focus-banner-text"> <p>這是四句廣告語</p> </div> </li> </ul> <a href="javascript:;" id="next-img" class="focus-handle"></a> <a href="javascript:;" id="prev-img" class="focus-handle"></a> <ul id="focus-bubble"></ul></div><script src="js/jquery-1.10.1.min.js"></script><script>$(function(){ var focusBanner=function(){ var $focusBanner=$("#focus-banner"), $bannerList=$("#focus-banner-list li"), $focusHandle=$(".focus-handle"), $bannerImg=$(".focus-banner-img"), $nextBnt=$("#next-img"), $prevBnt=$("#prev-img"), $focusBubble=$("#focus-bubble"), bannerLength=$bannerList.length, _index=0, _timer=""; var _height=$(".focus-banner-img").find("img").height(); $focusBanner.height(_height); $bannerImg.height(_height); $(window).resize(function(){ window.location.reload() }); for(var i=0; i<bannerLength; i++){ $bannerList.eq(i).css("zIndex",bannerLength-i); $focusBubble.append("<li></li>"); } $focusBubble.find("li").eq(0).addClass("current"); var bubbleLength=$focusBubble.find("li").length; $focusBubble.css({ "width":bubbleLength*22, "marginLeft":-bubbleLength*11 });//初始化 $focusBubble.on("click","li",function(){ $(this).addClass("current").siblings().removeClass("current"); _index=$(this).index(); changeImg(_index); });//點擊輪換 $nextBnt.on("click",function(){ _index++ if(_index>bannerLength-1){ _index=0; } changeImg(_index); });//下一張 $prevBnt.on("click",function(){ _index-- if(_index<0){ _index=bannerLength-1; } changeImg(_index); });//上一張 function changeImg(_index){ $bannerList.eq(_index).fadeIn(250); $bannerList.eq(_index).siblings().fadeOut(200); $focusBubble.find("li").removeClass("current"); $focusBubble.find("li").eq(_index).addClass("current"); clearInterval(_timer); _timer=setInterval(function(){$nextBnt.click()},5000) }//切換主函數 _timer=setInterval(function(){$nextBnt.click()},5000) }();})</script></body></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
