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>m.survivalescaperooms.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測試，可獲得如下運行效果：