编程 Javascript jQuery

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实现的淡入淡出图片轮播效果示例

- Author -

zxz32384

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐

jQuery自定义图片上传插件实例代码

Apr 04 jQuery

jquery与js实现全选功能的区别

Jun 11 jQuery

原生JS与jQuery编写简单选项卡

Oct 30 jQuery

jquery 实现拖动文件上传加载进度条功能

Mar 18 jQuery

jquery中为什么能用$操作

Jun 18 jQuery

jquery多级树形下拉菜单的实例代码

Jul 09 jQuery

jquery实现垂直手风琴菜单

Mar 04 jQuery

jQuery实现高度灵活的表单验证功能示例【无UI】

Apr 30 jQuery

jQuery实现的上拉刷新功能组件示例

May 01 jQuery

jQuery实现简单弹幕制作

Dec 10 jQuery

jQuery实现动态向上滚动

Dec 21 jQuery

jQuery实现tab栏切换效果

Dec 22 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