jQuery实现的淡入淡出图片轮播效果示例


Posted in jQuery onAugust 29, 2018

本文实例讲述了jQuery实现的淡入淡出图片轮播效果。分享给大家供大家参考,具体如下:

1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致)

css部分:

<style>
  * {
    padding: 0;
    margin:0;
  }
  ul {
    list-style: none;
  }
  .out {
    width: 640px;
    height: 270px;
    margin:50px auto;
    position: relative;
  }
  .out img{
    width: 640px;
    height: 270px;
  }
  .out .img li {
    position: absolute;
    left:0;
    top:0;
    display: none;
  }
  .out .num {
    position: absolute;
    bottom: 20px;
    left: 0;
    font-size:0px;
    text-align:center;
    width: 100%;
  }
  .out .num li {
    width: 20px;
    height: 20px;
    line-height:20px;
    border-radius:50%;
    background:#666;
    color: #fff;
    text-align:center;
    display: inline-block;
    font-size:16px;
    margin:0 3px;
    cursor: pointer;
  }
  .out .num li.active {
    background:#a00;
  }
  .out .btn {
    position:absolute;
    top: 50%;
    margin-top:-30px;
    width: 30px;
    height: 60px;
    line-height:60px;
    background:rgba(0, 0, 0, 0.5);
    font-size:40px;
    color: #fff;
    text-align:center;
    display: none;
  }
  .out .left {
    left: 0;
  }
  .out .right {
    right: 0;
  }
  .out:hover .btn {
    display: block;
    cursor: pointer;
  }
</style>

HTML部分:

<body>
  <div class="out ">
    <ul class="img ">
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/1.jpg " alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/2.jpg " alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/3.jpg " alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/4.jpg " alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/5.jpg " alt=" ">
        </a>
      </li>
    </ul>
    <ul class="num ">
    </ul>
    <div class="left btn ">
      <</div>
        <div class="right btn ">></div>
    </div>
</body>

juery代码实现图片的自动轮播和 手动轮播效果

<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript">
 $(function() {
   //代码初始化
    var size=$(".img li").size();
    for (var i = 1; i <= size; i++) {
      var li="<li>"+i+"</li>";
      $(".num").append(li);
    };
    //手动控制轮播效果
    $(".img li").eq(0).show();
    $(".num li").eq(0).addClass("active");
    $(".num li").mouseover(function() {
      $(this).addClass("active").siblings().removeClass("active");
      var index = $(this).index();
      i=index;
      $(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
    })
    //自动
    var i = 0;
    var t = setInterval(move, 1500);
    //核心向左的函数
    function moveLeft() {
      i--;
      if (i == -1) {
         i = size-1;
      }
      $(".num li").eq(i).addClass("active").siblings().removeClass("active");
      $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
    }
    //核心向右的函数
    function move() {
      i++;
      if (i == size) {
        i = 0;
      }
      $(".num li").eq(i).addClass("active").siblings().removeClass("active");
      $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
    }
    //定时器的开始与结束
    $(".out").hover(function() {
      clearInterval(t);
    }, function() {
      t = setInterval(move, 1500)
    })
    //左边按钮的点击事件
    $(".out .left").click(function() {
      moveLeft();
    })
    //右边按钮的点击事件
    $(".out .right").click(function() {
      move();
    })
  })
</script>

这里使用本站演示图片,构建完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery淡入淡出轮播图</title>
<style>
  * {
    padding: 0;
    margin:0;
  }
  ul {
    list-style: none;
  }
  .out {
    width: 640px;
    height: 270px;
    margin:50px auto;
    position: relative;
  }
  .out .img li {
    position: absolute;
    left:0;
    top:0;
    display: none;
  }
  .out .num {
    position: absolute;
    bottom: 20px;
    left: 0;
    font-size:0px;
    text-align:center;
    width: 100%;
  }
  .out .num li {
    width: 20px;
    height: 20px;
    line-height:20px;
    border-radius:50%;
    background:#666;
    color: #fff;
    text-align:center;
    display: inline-block;
    font-size:16px;
    margin:0 3px;
    cursor: pointer;
  }
  .out .num li.active {
    background:#a00;
  }
  .out .btn {
    position:absolute;
    top: 50%;
    margin-top:-30px;
    width: 30px;
    height: 60px;
    line-height:60px;
    background:rgba(0, 0, 0, 0.5);
    font-size:40px;
    color: #fff;
    text-align:center;
    display: none;
  }
  .out .left {
    left: 0;
  }
  .out .right {
    right: 0;
  }
  .out:hover .btn {
    display: block;
    cursor: pointer;
  }
</style>
</head>
<body>
  <div class="out ">
    <ul class="img ">
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" alt=" ">
        </a>
      </li>
    </ul>
    <ul class="num ">
    </ul>
    <div class="left btn ">
      <</div>
        <div class="right btn ">></div>
    </div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
   //代码初始化
    var size=$(".img li").size();
    for (var i = 1; i <= size; i++) {
      var li="<li>"+i+"</li>";
      $(".num").append(li);
    };
    //手动控制轮播效果
    $(".img li").eq(0).show();
    $(".num li").eq(0).addClass("active");
    $(".num li").mouseover(function() {
      $(this).addClass("active").siblings().removeClass("active");
      var index = $(this).index();
      i=index;
      $(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
    })
    //自动
    var i = 0;
    var t = setInterval(move, 1500);
    //核心向左的函数
    function moveLeft() {
      i--;
      if (i == -1) {
         i = size-1;
      }
      $(".num li").eq(i).addClass("active").siblings().removeClass("active");
      $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
    }
    //核心向右的函数
    function move() {
      i++;
      if (i == size) {
        i = 0;
      }
      $(".num li").eq(i).addClass("active").siblings().removeClass("active");
      $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
    }
    //定时器的开始与结束
    $(".out").hover(function() {
      clearInterval(t);
    }, function() {
      t = setInterval(move, 1500)
    })
    //左边按钮的点击事件
    $(".out .left").click(function() {
      moveLeft();
    })
    //右边按钮的点击事件
    $(".out .right").click(function() {
      move();
    })
  })
</script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可获得如下运行效果:

jQuery实现的淡入淡出图片轮播效果示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
JQuery扩展对象方法操作示例
Aug 21 #jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
菊花转动的jquery加载动画效果
Aug 19 #jQuery
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python处理json数据中的中文
2014/03/06 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python实现发送邮件及附件功能
2021/03/02 Python
python递归全排列实现方法
2018/08/18 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
python随机生成库faker库api实例详解
2019/11/28 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
自主招生教师推荐信
2014/05/10 职场文书
社区志愿者培训方案
2014/06/10 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
机械专业求职信范文
2014/07/15 职场文书
企业贷款委托书格式
2014/09/12 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
2015年招聘工作总结
2014/12/12 职场文书
继承公证书格式
2015/01/26 职场文书
扬州个园导游词
2015/02/06 职场文书
2016新年慰问信范文
2015/03/25 职场文书