基于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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
js实现验证码干扰(动态)
Feb 23 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
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
javascript的console.log()用法小结
2012/05/31 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python中的列表知识点汇总
2015/04/14 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python多线程并发实例及其优化
2019/06/27 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
如何理解transaction事务的概念
2015/05/27 面试题
上课迟到检讨书300字
2014/10/15 职场文书
仓管员岗位职责
2015/02/03 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
地道战观后感2000字
2015/06/04 职场文书
党员身份证明材料
2015/06/19 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL