首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery仿微信聊天界面
May 06 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
Jquery Fade用法详解
Nov 06 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
iOS(1) iOS15(1) moviepy(1) 模糊匹配(1) opencv(7) compose(3) iOS16(1) iPhone(1) Athens(1) FuzzyWuzzy(1)
You might like
php封装的验证码类分享
2017/02/26 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP时间函数使用详解
2019/03/21 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
JS解析XML的实现代码
2009/11/12 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
python 实现批量图片识别并翻译
2020/11/02 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
Rockport乐步美国官网：风靡美国的白宫鞋
2016/11/24 全球购物
社会治安综合治理管理责任书
2014/04/16 职场文书
离职感谢信怎么写
2015/01/22 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
《花钟》教学反思
2016/02/17 职场文书
聘任书的格式及模板
2019/10/28 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL