欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果示例

 更新時間：2018年08月29日 12:07:53   作者：zxz32384  
這篇文章主要介紹了jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果,涉及jQuery基于定時器的頁面元素動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果。分享給大家供大家參考，具體如下：

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代碼實(shí)現(xiàn)圖片的自動輪播和 手動輪播效果

<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);
    //核心向左的函數(shù)
    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);
    }
    //核心向右的函數(shù)
    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);
    }
    //定時器的開始與結(jié)束
    $(".out").hover(function() {
      clearInterval(t);
    }, function() {
      t = setInterval(move, 1500)
    })
    //左邊按鈕的點(diǎn)擊事件
    $(".out .left").click(function() {
      moveLeft();
    })
    //右邊按鈕的點(diǎn)擊事件
    $(".out .right").click(function() {
      move();
    })
  })
</script>

這里使用本站演示圖片，構(gòu)建完整代碼如下：

<!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.dbjr.com.cn 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.jb51.net/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.jb51.net/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.jb51.net/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.jb51.net/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.jb51.net/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);
    //核心向左的函數(shù)
    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);
    }
    //核心向右的函數(shù)
    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);
    }
    //定時器的開始與結(jié)束
    $(".out").hover(function() {
      clearInterval(t);
    }, function() {
      t = setInterval(move, 1500)
    })
    //左邊按鈕的點(diǎn)擊事件
    $(".out .left").click(function() {
      moveLeft();
    })
    //右邊按鈕的點(diǎn)擊事件
    $(".out .right").click(function() {
      move();
    })
  })
</script>
</body>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試，可獲得如下運(yùn)行效果：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • Jquery在IE7下無法使用 $.ajax解決方法

    Jquery在IE7下無法使用 $.ajax解決方法

    今天在做系統(tǒng)測試的時候，原本用Jquery寫了一個動態(tài)加載的樹形菜單，發(fā)現(xiàn)在IE7下無法加載數(shù)據(jù)，(采用的是jquery1.3.2版本的$.ajax方法)，上網(wǎng)查詢到原來是IE7的執(zhí)行ajax是用XMLHTTPRequest來聲明的，經(jīng)過對比果然如此；后采用以下的方法隨即解決了問題。
    2009-11-11
  • jquery 中ajax執(zhí)行的優(yōu)先級

    jquery 中ajax執(zhí)行的優(yōu)先級

    本文給大家講述的是個人再做用戶注冊的時候遇到的ajax執(zhí)行優(yōu)先級的問題，以及在網(wǎng)友們的幫助下，解決此問題的全過程，這里記錄下來，分享給大家。
    2015-06-06
  • 日常收藏的jquery技巧

    日常收藏的jquery技巧

    jQuery是繼prototype 之后的又一個優(yōu)秀的Javascript框架，本篇文章給大家分享收藏的jquery技巧，對jquery技巧相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • jQuery Ajax使用FormData對象上傳文件的方法

    jQuery Ajax使用FormData對象上傳文件的方法

    這篇文章主要介紹了jQuery Ajax使用FormData對象上傳文件的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-09-09
  • jQuery獲取同級元素的簡單代碼

    jQuery獲取同級元素的簡單代碼

    下面小編就為大家?guī)硪黄猨Query獲取同級元素的簡單代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • jquery實(shí)現(xiàn)圖片裁剪思路及實(shí)現(xiàn)

    jquery實(shí)現(xiàn)圖片裁剪思路及實(shí)現(xiàn)

    JS，jquery不能實(shí)現(xiàn)圖片的裁剪，只是顯示了一個假象，在服務(wù)器上用獲得的各個坐標(biāo)值，以及原始圖片，用JAVA進(jìn)行裁剪
    2013-08-08
  • jQuery UI Grid 模態(tài)框中的表格實(shí)例代碼

    jQuery UI Grid 模態(tài)框中的表格實(shí)例代碼

    這篇文章主要介紹了jQuery UI Grid 模態(tài)框中的表格實(shí)例代碼講解，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
    2017-04-04
  • jQuery的觀察者模式詳解

    jQuery的觀察者模式詳解

    本文主要是介紹了jQuery中on方法及trigger方法，以及圍繞這個方法來體驗(yàn)的觀察者模式，是篇非常不錯的文章，對我們理解觀察者模式很有幫助。
    2014-12-12
  • jquery獲取點(diǎn)擊控件的絕對位置簡單實(shí)例

    jquery獲取點(diǎn)擊控件的絕對位置簡單實(shí)例

    下面小編就為大家?guī)硪黄猨query獲取點(diǎn)擊控件的絕對位置簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10

最新評論