2. 程式人生 > 程式設計 >vue實現圖片切換效果

vue實現圖片切換效果

阿新 • • 發佈：2021-06-27

本文例項為大家分享了vue實現圖片切換效果的具體程式碼，供大家參考，具體內容如下

1）v-if/v-show

二者都可以實現讓元素隱藏和顯示。但是實現原理不同：
v-if 是通過將元素從dom樹中移除和新增來實現元素的隱藏和顯示效果。
v-show 是通過修改元素的displace值來實現元素的隱藏和顯示效果。

2）v-bind

v-bind可以對元素的屬性值進行修改。
基於這些背景知識，下面來實現圖片切換例項。

功能需求

1）點選左邊按鈕，顯示前一張圖片；程式設計客棧如果圖片是第一張，則隱藏該按鈕
2）點選右邊按鈕，顯示後一張圖片；如果圖片是最後一張，則隱藏該按鈕

vue實現圖片切換效果

實現程式碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>圖片切換效果</title>
        <style>
            #test{
                position: absolute;
            }
            #left{
                position: absolute;
                top: 134px;
                z-index: 99;
                width: 24px;
                height: 32px;
                background-color: black;
                color: white;
                font-size: 24px;
                opacity: 0.6;
                cursor: pointer;
            }
            #right{
                position: absolute;
                right: 0;
                top: 134px;
                z-index: 99;
                width: 24px;
                height: 32px;
                background-color: black;
                colorwww.cppcns.com
 
: white;
                font-size: 24px;
                opacity: 0.6;
                cursor: pointer;
            }
            img{
                width: 500px;
                height: 300px;
                
            }
            
        </style>
    </head>
    <body>
        <div id="test" >
            <div id="left" @click = "changeleft" v-if="lefttt">  &lt; </div>
            <img v-bind:src = "'imgs/00'+num+'.jpg'"/><br>
            <div id="right" @click = "changeright" v-show="righttt"> &gt; </div>
           

        </div>
    </body>
    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.
 
jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
         
         var dated = new Vue({
             //掛載點
             el: "#test",//資料
             data:程式設計客棧 {
                num: 1,lefttt:false,righttt:true,},methods: {
                 changeleft : function (){
                    if(this.num <= 2){
                        this.lefttt=false;
                        this.num = 1;
                    }else{
       
 
程式設計客棧                 this.lefttt=true;
                        this.num--;
                    }
                    
                    this.righttt=true;
                 },changeright : function (){
                    if(this.num >= 7){
                   qBrtjpalJ     this.righttt=false;
                        this.num = 8;
                    }else{
                        this.righttt=true;
                        this.num++;
                    }
                    
                    this.lefttt=true;
                    
                 }
             }
         });
    
    </script>
</html>

效果

1）顯示第一張圖片時

vue實現圖片切換效果

2）顯示最後一張圖片時

vue實現圖片切換效果

3）顯示其他張圖片時

vue實現圖片切換效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

vue實現圖片切換效果

本文例項為大家分享了vue實現圖片切換效果的具體程式碼，供大家參考，具體內容如下

jQuery實現圖片切換效果

本文例項為大家分享了jQuery實現圖片切換效果的具體程式碼，供大家參考，具體內容如下

Vue實現簡單圖片切換效果

本文例項為大家分享了vue實現簡單圖片切換的具體程式碼，供大家參考，具體內容如下

vue實現頁面切換滑動效果

本文例項為大家分享了vue實現頁面切換滑動的具體程式碼，供大家參考，具體內容如下

vue實現按鈕切換圖片

本文例項為大家分享了vue實現按鈕切換圖片的具體程式碼，供大家參考，具體內容如下

vue使用動態元件實現TAB切換效果

問題描述 tab切換的場景在開發中會經常用到。當需要實現這種效果的時候，我們常常會想到下面的方式去實現這個效果。

Vue實現圖片預覽效果例項（放大、縮小、拖拽）

前言 這張圖是顯示的圖片放大的一個預覽情況，這裡是參考預覽操作實現的一個背景為黑色的部分，上層的圖片可實現滾輪放大或者點選上部的放大鏡圖示進行放大，程式碼是基於Ant Design vue框架的基礎上

Vue.js實現圖片切換功能

本文例項為大家分享了vue.js實現圖片切換功能的具體程式碼，供大家參考，具體內容如下

vue+js點選箭頭實現圖片切換

本文例項為大家分享了+點選箭頭實現圖片切換的具體程式碼，供大家參考，具體內容如下

vue實現tab切換的放大鏡效果

本文例項為大家分享了實現tab切換的放大鏡效果的具體程式碼，供大家參考，具體內容如下

ES6實現圖片切換特效程式碼

效果圖 demo.html <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

vue實現圖片懶載入的方法分析

本文例項講述了vue實現圖片懶載入的方法。分享給大家供大家參考，具體如下：

vue實現帶過渡效果的下拉選單功能

本文例項為大家分享了vue中仿寫下拉選單功能，帶有過渡效果(移動端)，供大家參考，具體內容如下

iOS實現圖片摺疊效果

本文例項為大家分享了iOS實現圖片摺疊效果的具體程式碼，供大家參考，具體內容如下

iOS實現圖片抖動效果

本文例項為大家分享了iOS實現圖片抖動效果的具體程式碼，供大家參考，具體內容如下

Vue實現圖片輪播元件思路及例項解析

1、先看效果： 熟悉的圖片輪播，只要是個網站，百分之90以上會有個圖片輪播。我認為使用圖片輪播。

JS實現圖片幻燈片效果程式碼例項

其效果是點選圖片切換到下一張圖片 首先準備五張圖片 <ul class=\"imge\"> <li><img src=\"images/1.jpg\" width=\"400px\" height=\"300px\" /></li>

Vue實現跑馬燈效果

本文例項為大家分享了Vue實現跑馬燈效果的具體程式碼，供大家參考，具體內容如下

Js和VUE實現跑馬燈效果

本文例項為大家分享了Js和VUE分別實現跑馬燈效果的具體程式碼，供大家參考，具體內容如下

vue實現圖片上傳功能

本文例項為大家分享了vue實現圖片上傳功能的具體程式碼，供大家參考，具體內容如下