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


Posted in Javascript onAugust 24, 2016

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

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
详解Bootstrap按钮
Jan 04 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 #Javascript
JS for...in 遍历语句用法实例分析
Aug 24 #Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 #Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 #Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 #Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 #Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
php中动态调用函数的方法
2015/03/16 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
农救科工作职责
2013/11/27 职场文书
三年级音乐教学反思
2014/01/28 职场文书
学雷锋月活动总结
2014/04/25 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
关于保护环境的建议书
2014/08/26 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
详解python的异常捕获
2022/03/03 Python
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
Java Spring Lifecycle的使用
2022/05/06 Java/Android