投稿
  1. 簡單一點首頁
  2. 投稿

js輪播圖實現簡單代碼「輪播圖jquery代碼」

投稿專員 • • 投稿

將jquery輪播圖修改為vue輪播圖

修改時有幾個坑需要注意：

  • jq和vue的事件綁定會有衝突，需要將jq的事件綁定修改為在html元素上使用v-on
  • jq綁定事件時，可以將同類名的所有元素都一起綁定，例如：$(‘little_img’).click(function(){}),function裏面可以使用$(this)來獲取當前元素。vue在綁定事件時，是在html元素上綁定，要獲取當前元素需要使用function($event),例如：<a @mouseover=”switchImg($event)”>標籤</a> ，要獲取當前元素，需要在js里使用e.target或者e.currentTarget(target和currentTarget的區別是: target:觸發事件的元素。currentTarget:事件綁定的元素。 兩者在沒有冒泡的情況下,是一樣的值,但在用了事件委託的情況下,就不一樣了),這種情況下需要使用e.currentTarget。獲取所有元素時，只能使用$(‘元素選擇器’)
  • jq使用show()和hide()方法時，和vue使用v-show的原理是一樣的，所以可以先在元素上使用v-show()，然後在js使用$().hide(),來更換元素的顯示或者隱藏效果
  • 定時器在使用時，傳遞方法時不要加括號，例如：
this.timer = setInterval(this.auto_play, 2000); //定時器引用方法時，不用加括號
  • 定時器在輪播圖使用時，要在頁面渲染完之後調用，在鼠標懸停在圖片上時清除定時器，在鼠標離開圖片時再創建定時器。但在是vue中，沒有鼠標懸停的方法，我們可以使用@mouseenter,@mouseleave
  • 在引用變量時，要放在data中

原代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>路線詳情</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">



</head>

<body>
<!--引入頭部-->
<div id="header"></div>
    <!-- 詳情 start -->   
    <div class="wrap">
        <div class="bread_box">
            <a href="/">首頁</a>
            <span> ></span>
            <a href="#">國內游</a><span> ></span>
            <a href="#">全國-曼谷6-7天自由行 泰國出境旅遊 特價往返機票自由行二次確認</a>
        </div>
        <div class="prosum_box">
            <dl class="prosum_left">
                <dt>
                    <img alt="" class="big_img" src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
                </dt>
                <dd id="dd">
                    <a class="up_img up_img_disable"></a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m20920d0669855e745d97f9ad1df966ebb.jpg">
                    </a>
                    <a title="" class="little_img cur_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m29788843d72171643297ccc033d9288ee.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2531a8dbceefa2c44e6d0e35627cd2689.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m26d8cb900e9f6c0a762aca19eae40c00c.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m25ea00f6eba562a767b5095bbf8cffe07.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m267db00e1b76718fab0fe8b96e10f4d35.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m287bbbc6e43eba6aa6a36cc1a182f7a20.jpg">
                    </a>
                    <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
                </dd>
            </dl>
            <div class="prosum_right">
               <p class="pros_title" id="rname">【尾單特賣】全國-曼谷6-7天自由行 泰國出境旅遊 特價往返機票自由行二次確認</p>
                <p class="hot" id="routeIntroduce">1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p>
                <div class="pros_other">
                    <p >經營商家  ：<span id="sname">黑馬國旅</span></p>
                    <p >諮詢電話 : <span id="consphone">400-618-9090</span></p>
                    <p >地址 ： <span id="address">傳智播客黑馬程序員</span></p>
                </div>
                <div class="pros_price">
                    <p class="price"><strong id="price">¥2699.00</strong><span>起</span></p>
                    <p class="collect">
                        <a class="btn"><i class="glyphicon glyphicon-heart-empty"></i>點擊收藏</a>

                        <a  class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>點擊收藏</a>
                        <span>已收藏100次</span>
                    </p>
                </div>        
            </div>
        </div>
        <div class="you_need_konw">
            <span>旅遊須知</span>
            <div class="notice">
                <p>1、旅行社已投保旅行社責任險。建議遊客購買旅遊意外保險 <br>

                <p>2、旅遊者參加打獵、潛水、海邊游泳、漂流、滑水、滑雪、滑草、蹦極、跳傘、滑翔、乘熱氣球、騎馬、賽車、攀岩、水療、水上飛機等屬於高風險性遊樂項目的，敬請旅遊者務必在參加前充分了解項目的安全須知並確保身體狀況能適應此類活動；如旅遊者不具備較好的身體條件及技能，可能會造成身體傷害。</p>

                <p>3、參加出海活動時，請務必穿着救生設備。參加水上活動應注意自己的身體狀況，有心臟病、冠心病、高血壓、感冒、發燒和飲酒及餐後不可以參加水上活動及潛水。在海里活動時，嚴禁觸摸海洋中各種魚類，水母，海膽，珊瑚等海洋生物，避免被其蟄傷。老人和小孩必須有成年人陪同才能參加合適的水上活動。在海邊遊玩時，注意保管好隨身攜帶的貴重物品。</p>

                <p>4、根據中國海關總署的規定，旅客在境外購買的物品，在進入中國海關時可能需要徵收關稅。詳細內容見《中華人民共和國海關總署公告2010年第54號文件》。</p>

                <p>5、建議出發時行李託運，貴重物品、常用物品、常用藥品、禦寒衣物等請隨身攜帶，盡量不要託運。行李延誤屬於不可抗力因素，我司將全力協助客人跟進後續工作，但我司對此不承擔任何責任。</p>
                <p>1、旅行社已投保旅行社責任險。建議遊客購買旅遊意外保險 <br>

                <p>2、旅遊者參加打獵、潛水、海邊游泳、漂流、滑水、滑雪、滑草、蹦極、跳傘、滑翔、乘熱氣球、騎馬、賽車、攀岩、水療、水上飛機等屬於高風險性遊樂項目的，敬請旅遊者務必在參加前充分了解項目的安全須知並確保身體狀況能適應此類活動；如旅遊者不具備較好的身體條件及技能，可能會造成身體傷害。</p>

                <p>3、參加出海活動時，請務必穿着救生設備。參加水上活動應注意自己的身體狀況，有心臟病、冠心病、高血壓、感冒、發燒和飲酒及餐後不可以參加水上活動及潛水。在海里活動時，嚴禁觸摸海洋中各種魚類，水母，海膽，珊瑚等海洋生物，避免被其蟄傷。老人和小孩必須有成年人陪同才能參加合適的水上活動。在海邊遊玩時，注意保管好隨身攜帶的貴重物品。</p>

                <p>4、根據中國海關總署的規定，旅客在境外購買的物品，在進入中國海關時可能需要徵收關稅。詳細內容見《中華人民共和國海關總署公告2010年第54號文件》。</p>

                <p>5、建議出發時行李託運，貴重物品、常用物品、常用藥品、禦寒衣物等請隨身攜帶，盡量不要託運。行李延誤屬於不可抗力因素，我司將全力協助客人跟進後續工作，但我司對此不承擔任何責任。</p>
            </div>           
        </div>
    </div>
    <!-- 詳情 end -->

    <!--引入頭部-->
    <div id="footer"></div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--導入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
    <script src="js/getParameter.js"></script>
    <script>
    $(document).ready(function() {

        //自動播放
        goImg();
        // var timer = setInterval("auto_play()", 5000);
    });
    function goImg(){
        //焦點圖效果
        //點擊圖片切換圖片
        $('.little_img').on('mousemove', function() {
                $('.little_img').removeClass('cur_img');
                var big_pic = $(this).data('bigpic');
                $('.big_img').attr('src', big_pic);
                $(this).addClass('cur_img');
        });
        //上下切換
        var picindex = 0;
        var nextindex = 4;
        $('.down_img').on('click',function(){
            var num = $('.little_img').length;
            if((nextindex + 1) <= num){
                $('.little_img:eq('+picindex+')').hide();
                $('.little_img:eq('+nextindex+')').show();
                picindex = picindex + 1;
                nextindex = nextindex + 1;
            }
        });
        $('.up_img').on('click',function(){
            var num = $('.little_img').length;
            if(picindex > 0){
                $('.little_img:eq('+(nextindex-1)+')').hide();
                $('.little_img:eq('+(picindex-1)+')').show();
                picindex = picindex - 1;
                nextindex = nextindex - 1;
            }
        });
    }
    //自動輪播方法
    function auto_play() {
        var cur_index = $('.prosum_left dd').find('a.cur_img').index();
        cur_index = cur_index - 1;
        var num = $('.little_img').length;
        var max_index = 3;
        if ((num - 1) < 3) {
            max_index = num - 1;
        }
        if (cur_index < max_index) {
            var next_index = cur_index + 1;
            var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(' + next_index + ')').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        } else {
            var big_pic = $('.little_img:eq(0)').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(0)').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        }
    }


    $(function () {

        /*

                 <dd>
                    <a class="up_img up_img_disable"></a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m20920d0669855e745d97f9ad1df966ebb.jpg">
                    </a>
                    <a title="" class="little_img cur_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m29788843d72171643297ccc033d9288ee.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2531a8dbceefa2c44e6d0e35627cd2689.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m26d8cb900e9f6c0a762aca19eae40c00c.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m25ea00f6eba562a767b5095bbf8cffe07.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m267db00e1b76718fab0fe8b96e10f4d35.jpg">
                    </a>
                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg" style="display:none;">
                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m287bbbc6e43eba6aa6a36cc1a182f7a20.jpg">
                    </a>
                    <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
                </dd>


         */

       //1.獲取rid
       var rid = getParameter("rid");
       
       //2.發送請求請求 route/findOne
        $.get("route/findOne",{rid:rid},function (route) {
            //3.解析數據填充html
            $("#rname").html(route.rname);
            $("#routeIntroduce").html(route.routeIntroduce);
            $("#price").html("¥"+route.price);
            $("#sname").html(route.seller.sname);
            $("#consphone").html(route.seller.consphone);
            $("#address").html(route.seller.address);

            //圖片展示

            var ddstr = '<a class="up_img up_img_disable"></a>';

            //遍歷routeImgList
            for (var i = 0; i < route.routeImgList.length; i++) {
                var astr ;
                if(i >= 4){
                    astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'" style="display:none;">\n' +
                        '                        <img src="'+route.routeImgList[i].smallPic+'">\n' +
                        '                    </a>';
                }else{
                    astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'">\n' +
                        '                        <img src="'+route.routeImgList[i].smallPic+'">\n' +
                        '                    </a>';
                }


                ddstr += astr;
            }
            ddstr+='<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';

            $("#dd").html(ddstr);

            //圖片展示和切換代碼調用
            goImg();
        });
    });



    </script>
</body>

</html>

修改後代碼：

這裡使用的是ajax訪問數據庫獲得的數據，與上面的代碼不同，請各位自行準備數據測試

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>路線詳情</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">

</head>

<body>
<!--引入頭部-->
<div id="header"></div>
    <!-- 詳情 start -->   
    <div class="wrap">
        <div class="bread_box">
            <a href="/">首頁</a>
            <span> ></span>
            <a href="#">國內游</a><span> ></span>
            <a href="#">{{travel.rname}}</a>
        </div>
        <div class="prosum_box">
            <dl class="prosum_left">
                <dt>
                    <img alt="" class="big_img" :src="travel.routeImgList[1].bigPic" v-if="travel.routeImgList">
                </dt>
                <dd >
                    <a class="up_img up_img_disable" @click="putUp($event)"></a>
                    <a title="" :class="{little_img:true,cur_img:index==1}" :data-bigpic="routeImg.bigPic"
                       v-for="(routeImg,index) in travel.routeImgList" :key="index" @mouseover="switchImg($event)" v-show="index<4">
                        <img :src="routeImg.smallPic" @mouseenter="clearTimer()" @mouseleave="creatTimer()">
                    </a>

                    <a class="down_img down_img_disable" style="margin-bottom: 0;" @click="putDown($event)"></a>
                </dd>
            </dl>
            <div class="prosum_right">
               <p class="pros_title">{{travel.rname}}</p>
                <p class="hot">{{travel.routeIntroduce}}</p>
                <div class="pros_other" v-if="travel.seller">
                    <p>經營商家  ：{{travel.seller.sname }}</p>
                    <p>諮詢電話 : {{travel.seller.consphone}}</p>
                    <p>地址 ： {{travel.seller.address}}</p>
                </div>
                <div class="pros_price">
                    <p class="price"><strong>¥{{travel.price}}</strong><span>起</span></p>
                    <p class="collect">
                        <a class="btn"><i class="glyphicon glyphicon-heart-empty"></i>點擊收藏</a>

                        <a  class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>點擊收藏</a>
                        <span>已收藏100次</span>
                    </p>
                </div>        
            </div>
        </div>
        <div class="you_need_konw">
            <span>旅遊須知</span>
            <div class="notice">
                <p>1、旅行社已投保旅行社責任險。建議遊客購買旅遊意外保險 <br>

                <p>2、旅遊者參加打獵、潛水、海邊游泳、漂流、滑水、滑雪、滑草、蹦極、跳傘、滑翔、乘熱氣球、騎馬、賽車、攀岩、水療、水上飛機等屬於高風險性遊樂項目的，敬請旅遊者務必在參加前充分了解項目的安全須知並確保身體狀況能適應此類活動；如旅遊者不具備較好的身體條件及技能，可能會造成身體傷害。</p>

                <p>3、參加出海活動時，請務必穿着救生設備。參加水上活動應注意自己的身體狀況，有心臟病、冠心病、高血壓、感冒、發燒和飲酒及餐後不可以參加水上活動及潛水。在海里活動時，嚴禁觸摸海洋中各種魚類，水母，海膽，珊瑚等海洋生物，避免被其蟄傷。老人和小孩必須有成年人陪同才能參加合適的水上活動。在海邊遊玩時，注意保管好隨身攜帶的貴重物品。</p>

                <p>4、根據中國海關總署的規定，旅客在境外購買的物品，在進入中國海關時可能需要徵收關稅。詳細內容見《中華人民共和國海關總署公告2010年第54號文件》。</p>

                <p>5、建議出發時行李託運，貴重物品、常用物品、常用藥品、禦寒衣物等請隨身攜帶，盡量不要託運。行李延誤屬於不可抗力因素，我司將全力協助客人跟進後續工作，但我司對此不承擔任何責任。</p>
                <p>1、旅行社已投保旅行社責任險。建議遊客購買旅遊意外保險 <br>

                <p>2、旅遊者參加打獵、潛水、海邊游泳、漂流、滑水、滑雪、滑草、蹦極、跳傘、滑翔、乘熱氣球、騎馬、賽車、攀岩、水療、水上飛機等屬於高風險性遊樂項目的，敬請旅遊者務必在參加前充分了解項目的安全須知並確保身體狀況能適應此類活動；如旅遊者不具備較好的身體條件及技能，可能會造成身體傷害。</p>

                <p>3、參加出海活動時，請務必穿着救生設備。參加水上活動應注意自己的身體狀況，有心臟病、冠心病、高血壓、感冒、發燒和飲酒及餐後不可以參加水上活動及潛水。在海里活動時，嚴禁觸摸海洋中各種魚類，水母，海膽，珊瑚等海洋生物，避免被其蟄傷。老人和小孩必須有成年人陪同才能參加合適的水上活動。在海邊遊玩時，注意保管好隨身攜帶的貴重物品。</p>

                <p>4、根據中國海關總署的規定，旅客在境外購買的物品，在進入中國海關時可能需要徵收關稅。詳細內容見《中華人民共和國海關總署公告2010年第54號文件》。</p>

                <p>5、建議出發時行李託運，貴重物品、常用物品、常用藥品、禦寒衣物等請隨身攜帶，盡量不要託運。行李延誤屬於不可抗力因素，我司將全力協助客人跟進後續工作，但我司對此不承擔任何責任。</p>
            </div>           
        </div>
    </div>
    <!-- 詳情 end -->

    <!--引入頭部-->
    <div id="footer"></div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--導入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue-axios.min.js"></script>
<script src="js/getParameter.js"></script>
    <script>
        //自動切換圖片

    let vm4 = new Vue({
        el:'.wrap',
        data:{
            travel:{},
            picindex:0,
            nextindex:4,
            timer:null
        },
        methods:{
            switchImg(e){
                let little_img = $(e.currentTarget)
                $('.little_img').removeClass('cur_img');
                var big_pic = little_img.data('bigpic');
                $('.big_img').attr('src', big_pic);
                little_img.addClass('cur_img');
                // console.log(e.currentTarget)
                // console.log($('.big_img')[0])
            },
            //上下切換
            putDown(e){

                var num = $('.little_img').length;
                if((this.nextindex + 1) <= num){
                    $('.little_img:eq('+this.picindex+')').hide(); //這裡與v-show的用法類似，所以可以改變v-show(),但是不能把css寫死
                    $('.little_img:eq('+this.nextindex+')').show();
                    this.picindex = this.picindex + 1;
                    this.nextindex = this.nextindex + 1;
                }
            },
            putUp(){
                var num = $('.little_img').length;
                if(this.picindex > 0){
                    $('.little_img:eq('+(this.nextindex-1)+')').hide();
                    $('.little_img:eq('+(this.picindex-1)+')').show();
                    this.picindex = this.picindex - 1;
                    this.nextindex = this.nextindex - 1;
                }
            },


            //自動輪播方法
            auto_play() {
                var cur_index = $('.prosum_left dd').find('a.cur_img').index();
                cur_index = cur_index - 1;
                var num = $('.little_img').length;
                var max_index = 3;
                if ((num - 1) < 3) {
                    max_index = num - 1;
                }
                if (cur_index < max_index) {
                    var next_index = cur_index + 1;
                    var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
                    $('.little_img').removeClass('cur_img');
                    $('.little_img:eq(' + next_index + ')').addClass('cur_img');
                    $('.big_img').attr('src', big_pic);
                } else {
                    var big_pic = $('.little_img:eq(0)').data('bigpic');
                    $('.little_img').removeClass('cur_img');
                    $('.little_img:eq(0)').addClass('cur_img');
                    $('.big_img').attr('src', big_pic);
                }
            },
            clearTimer(){
                clearInterval(this.timer)
            },
            creatTimer(){
                this.timer = setInterval(this.auto_play, 2000); //定時器引用方法時，不用加括號
            }
        },
        mounted(){
            let rid = getParameter("rid");
            this.axios.get('route/findOne',{params:{rid:rid}})
                .then(data=>{
                    console.log(data.data)
                    this.travel=data.data;
                    //自動播放
                    // clearInterval(timer);
                    this.timer = setInterval(this.auto_play, 2000); //定時器引用方法時，不用加括號

               })

        }
    })
    </script>
</body>

</html>

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/255640.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
0 0
上一篇 2024-12-15 12:28
下一篇 2024-12-15 12:28

相關推薦

發表回復

登錄後才能評論