基于Jquery实现焦点图淡出淡入效果


Posted in Javascript onNovember 30, 2015

本文实例讲述了基于Jquery实现焦点图淡出淡入效果代码。分享给大家供大家参考。具体如下:

这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的。

兼容到IE6+以上浏览器,有淡出淡入速度和切换间隔两个参数可以改。

运行效果截图如下:

基于Jquery实现焦点图淡出淡入效果

具体代码如下:

Html代码如下:

<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <title>淡出淡入焦点图</title>
 <link href="css/style.css" rel="stylesheet"/>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/common.js"></script>
</head>
<body>
 <div class="wrap">
  <div class="banner">
   <div class="bannerCon">
    <!-- 容器有做自适应宽度处理,下面的图片会保持居中显示,建议使用最大尺寸的图片填充 -->
    <ul class="imgList">
     <li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
     <li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
     <li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>
    </ul>
    <ul class="btnList clearfix">
     <li class="cur"><span></span></li>
     <li><span></span></li>
     <li><span></span></li>
    </ul>
    <span class="pre-nex prev"><</span> 
    <span class="pre-nex next">></span> 
   </div>
  </div>
 </div>
</body>
</html>

Css样式如下:

@charset "utf-8";
/* 简单reset */
body, p, ul, ol, li {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
img { border:none; }
a,button{ outline: none; }
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
} 
/* 具体样式 */
.banner { height: 400px; }
.banner .bannerCon {
  position: relative;
  width: 60%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.bannerCon .imgList {
  width: 100%;
  height: 100%;
}
.bannerCon .imgList li {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e2f6fd; /* 这个背景是为了展示宽度大于图片宽度时的区域,可以删除 */
  z-index: 1;
}
.bannerCon .imgList li a {
  display: block;
  height: 100%;
  text-align: center;
}
.imgList li a img {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -400px; /* 这个数值填图片的实际宽度的一半 */
}
.bannerCon .pre-nex {
  display: none;
  position: absolute;
  top: 50%;
  width: 40px;
  height: 60px;
  margin-top: -40px;
  font: bold 40px/60px Simsun;
  color: #ccc;
  text-align: center;
  border:none;
  background: rgba(0,0,0,.30);
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
  cursor: pointer;
  z-index: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  height: 12px;
  text-align:center;
  z-index: 6;
  _overflow: hidden;
}
.bannerCon .btnList li { display: inline; }
.bannerCon .btnList li span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 6px;
  background-color:#14829e;
  cursor: pointer;
}
.bannerCon .btnList li.cur span { background-color: #f30; }

Js代码如下:

//加载在文本读取之后的js语句 开始 =============================================================
  function fadeImg(obj,speed,interval){  //父级容器,淡出淡入速度,切换间隔
    $("."+obj).each(function(){
      var $box = $(this),
        $imgUl = $box.children(".imgList"),
        $imgLi = $imgUl.children("li"),
        $btnUl = $box.children(".btnList"),
        $btnLi = $btnUl.children("li"),
        $btnPreNex = $box.children(".pre-nex"),
        n = $imgLi.length,
        k = 0,
        Player = setInterval(function(){fade()},interval);
      $imgLi.eq(0).fadeIn(speed);             //第一张先淡入
      function fade(){                  //淡出淡入事件
        k += 1;
        if(k >= n){
          k = 0;
        }
        $btnLi.removeClass('cur').eq(k).addClass('cur');
        $imgLi.fadeOut(speed).eq(k).fadeIn(speed);  
      };
      $btnLi.click(function(){              //小圆点点击事件
        var index = $btnLi.index(this);
        $(this).addClass('cur').siblings('li').removeClass('cur');
        $imgLi.fadeOut(speed).eq(index).fadeIn(speed);
        k = index;
      });     
      $btnPreNex.click(function(){            //左右按钮点击事件              
        if(!$imgLi.is(":animated")){
          if($(this).hasClass('next')){
            k += 1;
            if(k >= n){
              k = 0;
            }
          }
          else{
            k += -1;
            if(k < 0){
              k = n-1;
            }
          }
          $btnLi.removeClass('cur').eq(k).addClass('cur');
          $imgLi.fadeOut(speed).eq(k).fadeIn(speed);
        }  
      });   
      $box.hover(                      //鼠标移入事件(不用toggle是为了兼容1.9+的JQ库)  
        function(){
          clearInterval(Player);
          $btnPreNex.addClass('show');
        },
        function(){
          Player = setInterval(function(){fade()},interval);
          $btnPreNex.removeClass('show');
        }
      );        
    });
  }  
  $(function () {              //读取轮播事件
    fadeImg("bannerCon",1000,3000);
  });

jq库用1.7+的都是没有问题的,希望对大家的学习有所帮助,感觉不错的同学就默默的点个赞吧。

Javascript 相关文章推荐
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 #Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 #Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 #Javascript
You might like
简单解决微信文章图片防盗链问题
2016/12/17 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python中字符串的格式化方法小结
2016/05/03 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
python实现大量图片重命名
2020/03/23 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Django celery异步任务实现代码示例
2020/11/26 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
ktv中秋节活动方案
2014/01/30 职场文书
大学军训感言800字
2014/02/27 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
省文明单位申报材料
2014/05/08 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
个人合作协议范本
2015/08/06 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
Golang入门之计时器
2022/05/04 Golang