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 相关文章推荐
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
JS实现小米轮播图
Sep 21 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
js获取class的所有元素
2013/03/28 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
js实现抽奖效果
2017/03/27 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
详解在Python中处理异常的教程
2015/05/24 Python
python僵尸进程产生的原因
2017/07/21 Python
python实现ID3决策树算法
2017/12/20 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
解读python如何实现决策树算法
2018/10/11 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
大学生职业规划书的范本
2014/02/18 职场文书
安全施工责任书
2014/08/25 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python