jQuery實(shí)現(xiàn)的自適應(yīng)焦點(diǎn)圖效果完整實(shí)例
本文實(shí)例講述了jQuery實(shí)現(xiàn)的自適應(yīng)焦點(diǎn)圖效果。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
<!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>焦點(diǎn)圖</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); });//點(diǎn)擊輪換 $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) }//切換主函數(shù) _timer=setInterval(function(){$nextBnt.click()},5000) }(); }) </script> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jQuery焦點(diǎn)圖左右轉(zhuǎn)換效果
- 輕量級jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼
- 基于JQuery實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- jQuery插件實(shí)現(xiàn)帶圓點(diǎn)的焦點(diǎn)圖片輪播切換
- 基于Jquery實(shí)現(xiàn)焦點(diǎn)圖淡出淡入效果
- jQuery右側(cè)選項卡焦點(diǎn)圖片輪播特效代碼分享
- jQuery插件bxSlider實(shí)現(xiàn)響應(yīng)式焦點(diǎn)圖
- jQuery焦點(diǎn)圖輪播效果實(shí)現(xiàn)方法
- 基于jquery實(shí)現(xiàn)輪播焦點(diǎn)圖插件
- jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖
相關(guān)文章
jquery實(shí)現(xiàn)人性化的有選擇性禁用鼠標(biāo)右鍵
與其使用比較暴力的手段禁用鼠標(biāo)右鍵,還不如有選擇性人性化的的禁用鼠標(biāo)右鍵,需要的朋友可以參考下2014-06-06jQuery焦點(diǎn)圖切換特效插件封裝實(shí)例
這篇文章介紹了jQuery焦點(diǎn)圖切換特效插件封裝實(shí)例,有需要的朋友可以參考一下2013-08-08jQuery中:first-child選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:first-child選擇器用法,實(shí)例分析了:first-child選擇器的功能、定義及匹配父元素的第一個子元素的用法技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12