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

2019-11-19 13:06:58

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>www.VeVB.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.VeVB.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.VeVB.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.VeVB.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.VeVB.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.VeVB.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.VeVB.COm/code/HtmlJsRun测试，可获得如下运行效果：