jQuery实现的自适应焦点图效果完整实例

本文实例讲述了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程序设计有所帮助。