本文实例讲述了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="#"> <img src="images/banner2.jpg" alt=""> </a> <div> <p>这是一句广告语</p> </div> </li> <li> <a href="#"> <img src="images/banner3.jpg" alt=""> </a> <div> <p>这是二句广告语</p> </div> </li> <li> <a href="#"> <img src="images/banner4.jpg" alt=""> </a> <div> <p>这是三句广告语</p> </div> </li> <li> <a href="#"> <img src="images/banner5.jpg" alt=""> </a> <div> <p>这是四句广告语</p> </div> </li> </ul> <a href="javascript:;" id="next-img"></a> <a href="javascript:;" id="prev-img"></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实现的自适应焦点图效果完整实例】相关文章：