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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 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
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP之短标签开启设置
2013/06/17 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python getopt详解及简单实例
2016/12/30 Python
python交互式图形编程实例(一)
2017/11/17 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
深入了解python列表(LIST)
2020/06/08 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
单位工作证明格式模板
2014/10/04 职场文书
预备党员考察意见范文
2015/06/01 职场文书
Python实现拼音转换
2021/06/07 Python