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

2019-11-20 09:09:52

字体：大中小

来源：转载

供稿：网友

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

上一篇：总结Javascript中的隐式类型转换

下一篇：BootStrap+Angularjs+NgDialog实现模式对话框