當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

jQuery实现简单的图片淡入淡出效果

發布時間：2023/12/19 综合教程 17 生活家

生活随笔收集整理的這篇文章主要介紹了 jQuery实现简单的图片淡入淡出效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

整體思路：

1.實現頁面布局，設置css樣式

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

3.用jQuery為兩個按鈕綁定事件

一.頁面布局：

<div class="d1">
   //隨便在網上找一張圖片放入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;
             100%;

        }
        .d1{
            position: absolute;
             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布局

我的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);//獲取起始圖片的索引值，后面函數要用到
//獲取兩個按鈕
    var $b1Ele=$('#b1');
    var $b2Ele=$('#b2');

三.用jQuery為兩個按鈕綁定事件

首先寫$b1El1的函數：

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

為$b1El1綁定函數：

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

同理可以寫出按鈕2的函數，并進行綁定

 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);

下面是整體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--設置css樣式-->
    <style>
        body{
            margin: 0 0 0 0;
            height: 1000px;
             100%;

        }
        .d1{
            position: absolute;
             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>

    <script src="jQuery.js"></script>
</head>
<body>
<div class="d1">
    <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>
<script>
    var imgList=['https://dummyimage.com/900x400/0000ff/ff','https://dummyimage.com/900x400/00/ff','https://dummyimage.com/900x400/ff0000/ff'];
    var $imgEle=$('img');
    var nowSrc=imgList.indexOf($imgEle[0].src);
    var $b1Ele=$('#b1');
    var $b2Ele=$('#b2');

    function f1(){
       $imgEle.fadeOut(500);
       console.log(nowSrc);
       if(nowSrc===0){
           nowSrc=imgList.length-1;
       }
       else {
           nowSrc--;
       }
       t=setTimeout(function () {
           $imgEle.attr('src',imgList[nowSrc]);
       $imgEle.fadeIn(500);
       },500);

    }
    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
    }
    $b1Ele.on('click',f1);
    $b2Ele.on('click',f2);
</script>
</body>
</html>

全部代碼

總結

以上是生活随笔為你收集整理的jQuery实现简单的图片淡入淡出效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SAP ERP物料和SAP Cloud
下一篇： SAP ERP和C4C Acount和C