使用React和CSS淡入淡出加載圖片：快速指南

eb開發(fā)人員和MVB展示了他如何在React中創(chuàng)建一個(gè)組件，使您可以使用CSS和React淡入緩存加載的圖像。

假設(shè)你想在你的網(wǎng)站上加載一些圖片。你不希望他們只是彈出存在，嚇倒用戶。效果很好，效果更好。

這是問題：沒有好的預(yù)制React組件。或者我吮吸找到它。

有一個(gè)react-lazyload，它為你做了一個(gè)懶惰的加載部分。它使組件不會(huì)掛載到DOM中，直到用戶真正看到它們。

這有助于加快您的網(wǎng)站加載速度。用戶不需要加載大圖像，直到用戶可以看到它們。

但是，默認(rèn)的體驗(yàn)可能會(huì)令人震驚。當(dāng)圖像最終加載時(shí)，他們只是彈出視圖。

react-lazyload提供了一個(gè)淡入的例子，但它已經(jīng)過時(shí)了，不適用于現(xiàn)代圖書館。而且使用起來很麻煩。

所以我建立了一個(gè)通用FadeIn組件。我會(huì)開放它，但它需要一些波蘭首先，我希望你的意見，如何做得更好。

該組件只有40行代碼。很簡單。

class FadeIn extends React.Component {
state = {
loaded: false ,
} ;
onLoad = ( ) => this.setState ( { loaded: true } ) ;
render( ) {
const { height, children } = this.props ,
{ loaded } = this.state ;
return (
<LazyLoad height= {height} offset= { 150 } >
<Transition in = {loaded} timeout= {duration} >
{state =>
<div style= { { ...defaultStyle , ...transitionStyles [state] } } >
{children( this.onLoad ) }
</div> }
</Transition>
</LazyLoad>
) ;
}
}
FadeIn.propTypes = {
height: PropTypes.number ,
children: PropTypes.func ,
} ;

FadeIn保持本地loaded狀態(tài)以跟蹤顯示內(nèi)容。

false意思是“保持透明”，

true意思是“完全不透明”。

它使用react-lazyload的LazyLoad組件來處理延遲加載的部分，并且Transition從react-transition-group來驅(qū)動(dòng)CSS漸變來淡入。這是自正式的淡入淡出的例子以來改變了很多的部分。

使用兒童渲染功能的方法，你可以要求FadeIn渲染任何你想要的。它被包裝在處理淡入淡出效果的div中。

所有你需要做的就是觸發(fā)onLoad回調(diào)，一旦你的內(nèi)容準(zhǔn)備就緒。當(dāng)你的圖像完成加載例如。

你渲染<FadeIn>，給它一個(gè)高度，所以事情不會(huì)跳來跳去，并通過一個(gè)onLoad回調(diào)的兒童功能。當(dāng)您準(zhǔn)備好觸發(fā)轉(zhuǎn)換時(shí)，您可以調(diào)用onLoad并FadeIn執(zhí)行它的操作。

你知道onLoad所有的瀏覽器支持一個(gè)內(nèi)置的DOM回調(diào)嗎？我不知道。

onLoad是非常重要的，因?yàn)槿绻麤]有它，F(xiàn)adeIn過渡可能會(huì)在圖像甚至落入管道之前結(jié)束。這是我面臨的第一個(gè)問題，當(dāng)我livecoded此。

建議？

我想開源這個(gè)。我知道這很簡單，但是可以為他們節(jié)省一個(gè)小時(shí)的時(shí)間。這是值得的，對吧？

還有什么需要做的？我應(yīng)該怎樣命名呢？你會(huì)用它嗎？

章節(jié)我們主要介紹 Vue.js 的過渡效果與動(dòng)畫效果。包括如何編寫自定義 CSS 動(dòng)畫、如何配合第三方 CSS 動(dòng)畫庫、過渡鉤子函數(shù)的使用、如何使用第三方 JavaScript 動(dòng)畫庫。本小節(jié)的內(nèi)容相對之前有些難度，同學(xué)們在閱讀一遍之后如果不能完全掌握，建議反復(fù)閱讀，并把本小節(jié)的所有案例自己實(shí)現(xiàn)一遍，相信通過多次的練習(xí)一定可以掌握。

1. 過渡

Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果。包括以下工具： 1、在 CSS 過渡和動(dòng)畫中自動(dòng)應(yīng)用 class； 2、配合使用第三方 CSS 動(dòng)畫庫，如 Animate.css； 3、在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM； 4、配合使用第三方 JavaScript 動(dòng)畫庫，如 Velocity.js。

語法格式：

使用 transition 組件包裹需要使用過渡效果的 DOM 元素。例如：

    <transition name = "transition-name">
      <div>...</div>
    </transition>

1.1 基本使用

接下來讓我們先看一個(gè)淡入淡出效果的實(shí)現(xiàn)代碼：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity 3s
    }
    .fade-enter, .fade-leave-to {
      opacity: 0
    }
  </style>
</head>
<body>
  <div id = "app">
    <button v-on:click = "show = !show">{{ show ? '隱藏' : '顯示'}}</button>
    <transition name="fade">
      <p v-show = "show" >hello !</p>
    </transition>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
        show:true
    },
    methods : {
    }
  });
</script>
</html>

12345678910111213141516171819202122232425262728293031323334353637

運(yùn)行案例點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：

HTML 代碼第 3-5 行，我們使用 transition 組件包裹 標(biāo)簽，transition 組件指定 name 為 fade，通過指令 v-show 控制 標(biāo)簽的顯示和隱藏；
HTML 代碼第 2 行，定義按鈕 button，點(diǎn)擊修改 show 的值來控制標(biāo)簽 的顯示隱藏；
CSS 中我們定義了 4 個(gè)樣式；
JS 代碼第 6 行，定義數(shù)據(jù) show，默認(rèn)值為 true。

那么，transition 組件是如何做到這樣的過渡效果的呢？

我想，同學(xué)們肯定猜想到當(dāng)元素切換狀態(tài)的時(shí)候，我們定義的樣式會(huì)作用于標(biāo)簽元素 。那么，到底是不是這樣呢？

打開控制臺(tái)，檢索到 標(biāo)簽上，我們可以清晰地看到：

當(dāng)元素隱藏的時(shí)候，樣式 fade-leave-active 和 fade-leave-to 會(huì)被添加到元素 上；
當(dāng)元素顯示的時(shí)候，樣式 fade-enter-active 和 fade-enter-to 會(huì)被添加到元素 上。

實(shí)際上 Vue 在元素顯示與隱藏的過渡中，提供了 6 個(gè) class 來切換：

v-enter：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除；
v-enter-active：定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡 / 動(dòng)畫完成之后移除。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)；
v-enter-to: 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過渡 / 動(dòng)畫完成之后移除。
v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)立刻生效，下一幀被移除；
v-leave-active：定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時(shí)立刻生效，在過渡 / 動(dòng)畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間，延遲和曲線函數(shù)；
v-leave-to: 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)，在過渡 / 動(dòng)畫完成之后移除。

對于這些在過渡中切換的類名來說，如果你使用一個(gè)沒有名字的 <transition>，則 v- 是這些類名的默認(rèn)前綴。如果你使用了 <transition name="test-transition">，那么 v 會(huì)替換為 test-transition。例如：test-transition-enter、test-transition-enter-active、test-transition-leave…

1.2 CSS 過渡

在日常開發(fā)中，我們經(jīng)常會(huì)使用 CSS 過渡來實(shí)現(xiàn)一些簡單的動(dòng)畫效果。接下來我們用一個(gè)示例來學(xué)習(xí)如何使用：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .fade-enter-active {
      transition: all .3s ease;
    }
    .fade-leave-active {
      transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .fade-enter, .fade-leave-to {
      transform: translateY(10px);
      opacity: 0;
    }
  </style>
</head>
<body>
  <div id = "app">
    <button v-on:click = "show = !show">{{ show ? '顯示' : '隱藏'}}</button>
    <transition name = "fade">
      <p v-show = "show" >Hello ！</p>
    </transition>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      show:true
    }
  });
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：

HTML 代碼第 3-5 行，我們使用 transition 組件包裹 標(biāo)簽，transition 組件指定 name 為 fade，通過指令 v-show 控制 標(biāo)簽的顯示和隱藏；
HTML 代碼第 2 行，定義按鈕 button，點(diǎn)擊修改 show 的值來控制標(biāo)簽 的顯示隱藏；
CSS 中我們定義了 4 個(gè)樣式，通過 transform 控制元素的垂直位移，通過 opacity 控制元素的透明度，通過 transition 控制元素的過渡效果；
JS 代碼第 6 行，定義數(shù)據(jù) show，默認(rèn)值為 true。

1.3 CSS 動(dòng)畫

同樣，我們可以使用 CSS 動(dòng)畫來實(shí)現(xiàn)元素的過渡效果。CSS 動(dòng)畫用法類似 CSS 過渡，在過渡的不同階段對應(yīng)的 Class 會(huì)作用于元素。但是在動(dòng)畫中 v-enter 類名在節(jié)點(diǎn)插入 DOM 后不會(huì)立即刪除，而是在 animationend 事件觸發(fā)時(shí)刪除。相信同學(xué)們在日常業(yè)務(wù)開發(fā)中一定使用過 Dialog，接下來我們就使用 CSS 動(dòng)畫來實(shí)現(xiàn)它的過渡效果：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #app{
      text-align: center;
    }
    .dialog{
      width: 100px;
      height: 100px;
      border: 1px solid #333;
      margin: 60px auto;
      text-align: center;
      line-height: 100px;
    }
    .bounce-enter-active {
      animation: bounce-in 400ms;
    }
    .bounce-leave-active {
      animation: bounce-out 300ms;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0.7);
      }
      50% {
        transform: scale(1.3);
      }
      100% {
        transform: scale(1);
      }
    }
    @keyframes bounce-out {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(0.4);
      }
    }
  </style>
</head>
<body>
  <div id = "app">
    <button v-on:click = "show = !show">{{ show ? '顯示 Dialog' : '隱藏 Dialog'}}</button>
    <transition name = "bounce">
      <p v-show = "show" class="dialog">Dialog...</p>
    </transition>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      show:false
    }
  });
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：

HTML 代碼第 3-5 行，我們使用 transition 組件包裹 標(biāo)簽，transition 組件指定 name 為 bounce 指令 v-show 控制 標(biāo)簽的顯示和隱藏；
HTML 代碼第 2 行，定義按鈕 button，點(diǎn)擊修改 show 的值來控制標(biāo)簽 的顯示隱藏；
CSS 中我們定義了樣式兩個(gè)樣式：元素入場樣式： bounce-enter-active，它執(zhí)行動(dòng)畫 bounce-in。元素出場樣式： bounce-leave-active，它執(zhí)行動(dòng)畫 bounce-out。
JS 代碼第 6 行，定義數(shù)據(jù) show，初始值為 true。

1.4 自定義過渡的類名

在之前的兩個(gè)案例中，我們通過給 transition 設(shè)置 name 屬性來指定元素在不同階段的樣式類名，但有時(shí)候希望使用自定義的過渡類名，我們可以通過給 transition 設(shè)置以下屬性來達(dá)到需求：

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

自定義過渡的類名優(yōu)先級(jí)高于普通的類名，這樣就能很好地與第三方（如：animate.css）的動(dòng)畫庫結(jié)合使用。

1.5 顯性的過渡持續(xù)時(shí)間

在很多情況下，Vue 可以自動(dòng)得出過渡效果的完成時(shí)機(jī)。默認(rèn)情況下，Vue 會(huì)等待其在過渡效果的根元素的第一個(gè) transitionend 或 animationend 事件。然而也可以不這樣設(shè)定 —— 比如，我們可以擁有一個(gè)精心編排的一系列過渡效果，其中一些嵌套的內(nèi)部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。

在這種情況下你可以用組件上的 duration 屬性定制一個(gè)顯性的過渡持續(xù)時(shí)間 (以毫秒計(jì))：

<transition :duration="1000">...</transition>

你也可以定制進(jìn)入和移出的持續(xù)時(shí)間：

<transition :duration="{ enter: 400, leave: 600 }">...</transition>

2. JavaScript 鉤子

transition 組件在過渡的不同階段會(huì)觸發(fā)相應(yīng)的鉤子函數(shù)：

<transition 
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <p>...</p>
</transition>

這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用，也可以單獨(dú)使用。

當(dāng)只用 JavaScript 過渡的時(shí)候，在 enter 和 leave 中必須使用 done 進(jìn)行回調(diào)。否則，它們將被同步調(diào)用，過渡會(huì)立即完成。

推薦對于僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會(huì)跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。

接下來我們來看一個(gè)使用鉤子函數(shù)和 Velocity.js 實(shí)現(xiàn)過渡動(dòng)畫的例子：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .hello{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      margin: auto;
    }
  </style>
</head>
<body>
  <div id = "app">
    <button @click="show = !show">
      切換顯示狀態(tài)
    </button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-if="show">
        Demo
      </p>
    </transition>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      show:false
    },
    methods: {
      beforeEnter: function (el) {
        el.style.opacity = 0
        el.style.transformOrigin = 'left'
      },
      enter: function (el, done) {
        Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
        Velocity(el, { fontSize: '1em' }, { complete: done})
      },
      leave: function (el, done) {
        Velocity(el, { translateX: '20px', rotateZ: '45deg' }, { duration: 600 })
        Velocity(el, { rotateZ: '90deg' }, { loop: 3 })
        Velocity(el, {
          rotateZ: '45deg',
          translateY: '30px',
          translateX: '30px',
          opacity: 0
        }, { complete: done })
      }
    }
  });
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：

HTML 代碼第 3-12 行，我們使用 transition 組件包裹 標(biāo)簽，并給 transition 組件綁定監(jiān)聽事件 before-enter、enter、leave；
HTML 代碼第 2 行，定義按鈕 button，點(diǎn)擊修改 show 的值來控制標(biāo)簽 的顯示隱藏；
JS 代碼第 7 行，定義數(shù)據(jù) show，默認(rèn)值為 false；
JS 代碼第 10-13 行，定義元素的 beforeEnter 函數(shù)，并修改元素的樣式 style；
JS 代碼第 14-17 行，定義元素的 enter 函數(shù)，并執(zhí)行以下操作：
使用 Velocity 修改元素的 opacity 和 fontSize，過渡時(shí)間為 300。
使用 Velocity 修改元素的 fontSize，并在完成時(shí)間調(diào)用 done 回調(diào)函數(shù)。
JS 代碼第 18-27 行，定義元素的 leave 函數(shù)，并執(zhí)行以下操作：
使用 Velocity 修改元素的 translateX 和 rotateZ，過渡時(shí)間為 600。
使用 Velocity 修改元素的 rotateZ，并且循環(huán) 3 次。
使用 Velocity 修改元素的 rotateZ 、translateY、translateX、opacity，并在完成時(shí)間調(diào)用 done 回調(diào)函數(shù)。

3. 初始渲染的過渡

有時(shí)候我們希望給元素設(shè)置初始渲染的過渡效果，可以通過給 transition 設(shè)置 appear 的 attribute：

<transition appear>
  <!-- ... -->
</transition>

這里默認(rèn)和進(jìn)入 / 離開過渡一樣，同樣也可以自定義 CSS 類名：

<transition
  appear
  appear-class="v-appear-class"
  appear-to-class="v-appear-to-class"
  appear-active-class="v-appear-active-class"
>
  <!-- ... -->
</transition>

同樣地，可以使用自定義 JavaScript 鉤子：

<transition
  appear
  v-on:before-appear="beforeAppear"
  v-on:appear="appear"
  v-on:after-appear="afterAppear"
  v-on:appear-cancelled="appearCancelled"
>
  <!-- ... -->
</transition>

接下來我們看一個(gè)完整的示例：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .hello{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      margin: auto;
    }
    .v-appear-class{
      opacity: 0;
    }
    .v-appear-to-class{
      opacity: 1;
    }
    .v-appear-active-class{
      transition: all 2s;
    }

  </style>
</head>
<body>
  <div id = "app">
    <button v-on:click = "show = !show">隱藏</button>
    <transition 
      appear
      appear-class="v-appear-class"
      appear-to-class="v-appear-to-class"
      appear-active-class="v-appear-active-class"
      v-on:before-appear="beforeAppear"
      v-on:appear="appear"
      v-on:after-appear="afterAppear"
      v-on:appear-cancelled="appearCancelled"
    >
      <p v-show = "show" class="hello">Hello ！</p>
    </transition>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      show:true
    },
    methods: {
      beforeAppear() {
        console.log('beforeAppear')
      },
      appear() {
        console.log('appear')
      },
      afterAppear() {
        console.log('afterAppear')
      },
      appearCancelled() {
        console.log('appearCancelled')
      },
    }
  });
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：

HTML 代碼第 3-14 行，我們使用 transition 組件包裹 標(biāo)簽，指定 transition 為初次渲染的過渡，并給 transition 組件綁定監(jiān)聽事件: before-appear、appear、after-appear、appear-cancelled；
HTML 代碼第 2 行，定義按鈕 button，點(diǎn)擊修改 show 的值來控制標(biāo)簽 的顯示隱藏；
JS 代碼第 6 行，定義數(shù)據(jù) show，默認(rèn)值為 false。

4. 小結(jié)

本小節(jié)我們介紹了如何使用 transition 實(shí)現(xiàn)過渡和動(dòng)畫效果，主要包括以下知識(shí)點(diǎn)：

使用 CSS 過渡配合 transition 實(shí)現(xiàn)過渡效果；
使用 CSS 動(dòng)畫配合 transition 實(shí)現(xiàn)動(dòng)畫效果；
使用 transition 鉤子函數(shù)操作元素 DOM 來實(shí)現(xiàn)動(dòng)畫；
使用 transition 的 appear 屬性實(shí)現(xiàn)初次渲染的動(dòng)畫效果。

體思路：

1.實(shí)現(xiàn)頁面布局，設(shè)置css樣式

2.用jQuery獲取需要用到的變量

3.用jQuery為兩個(gè)按鈕綁定事件

一.頁面布局：

<div class="d1">
 //隨便在網(wǎng)上找一張圖片放入img中//
 <img src="https://dummyimage.com/900x400/0000ff/ff" alt="" class="c1 c2">
 <div class="d2">
 <input type="button" value="<-" id="b1">
 <input type="button" value="->" id="b2">
 </div>
</div>

 <style>
 body{
 margin: 0 0 0 0;
 height: 1000px;
 width: 100%;
 }
 .d1{
 position: absolute;
 width: 100%;
 height: 500px;
 top: 50%;
 margin-top: -250px;
 }
 .d2{
 margin-left: 950px;
 }
 .d1 img{
 margin-left: 50px;
 position: relative;
 }
 .c1{
 display: block;
 padding-left: 500px;
 }
 </style>

我的css布局僅僅做了居中，各位可以做的更加美觀性

二.jQuery獲取需要用到的變量

 //imgList中放入你要加入的圖片，記得要加入在div中定義的起始圖片//
var imgList=['https://dummyimage.com/900x400/0000ff/ff','https://dummyimage.com/900x400/00/ff','https://dummyimage.com/900x400/ff0000/ff'];
 var $imgEle=$('img');//獲取div中的img
 var nowSrc=imgList.indexOf($imgEle[0].src);//獲取起始圖片的索引值，后面函數(shù)要用到
//獲取兩個(gè)按鈕
 var $b1Ele=$('#b1');
 var $b2Ele=$('#b2');

三.用jQuery為兩個(gè)按鈕綁定事件

首先寫$b1El1的函數(shù)：

function f1(){
 //先讓當(dāng)前圖片淡出，時(shí)間為0.5毫秒
 $imgEle.fadeOut(500);
 //進(jìn)行判斷，如果索引值為0，讓索引變成列表的最大值
 if(nowSrc===0){
 nowSrc=imgList.length-1;
 }
 //索引值不為0，進(jìn)行--
 else {
 nowSrc--;
 }
 //因?yàn)槲业龅臅r(shí)間設(shè)置為0.5毫秒，所以我設(shè)置計(jì)時(shí)器，讓下面的代碼0.5毫秒后啟動(dòng)
 t=setTimeout(function () {
 //更換圖片的src
 $imgEle.attr('src',imgList[nowSrc]);
 //圖片淡入，時(shí)間為0.5毫秒
 $imgEle.fadeIn(500);
 },500);
 }

為$b1El1綁定函數(shù)：

$b1Ele.on('click',f1);

同理可以寫出按鈕2的函數(shù)，并進(jìn)行綁定

 function f2(){
 $imgEle.fadeOut(500);
 console.log(nowSrc);
 if(nowSrc===imgList.length-1){
 nowSrc=0;
 }
 else {
 nowSrc++;
 }
 t2=setTimeout(function () {
 $imgEle.attr('src',imgList[nowSrc]);
 $imgEle.fadeIn(500);
 },500);
 t2=null
 }
 $b2Ele.on('click',f2);

下面是整體代碼：

在線咨詢

上一篇：JavaScript中的字符串
下一篇：「轉(zhuǎn)行測試開發(fā)-初學(xué)HTML」(一)元素和標(biāo)簽