2. 程式人生 > >用Vue實現一個簡單的輪播效果

用Vue實現一個簡單的輪播效果

阿新 • • 發佈：2018-11-14

Vue實現簡單的輪播效果，用的的一些常用系統指令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="../static/vue.js"></script>
    <title>Title</title>
    <style
 
>

        .turn{
            width: 600px;
            margin:0 auto;
        }
        ul{
            width: 300px;
            margin: 0 auto;
            overflow: hidden;
            list-style: none;
        }
        ul li{
            float: left;
            width: 30px;
            height: 30px
 
;
            background-color: hotpink;
            margin-left: 10px;
            line-height: 30px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
<div id="app" class="turn">
    <img :src="currentSrc" @mouseenter="closeTime"
 
 @mouseleave="openTime">


    <ul>
        <a><li v-for = "(item,i) in imgArr" @click="currentChange(item)" >{{ i+1 }}</li></a>
    </ul>
    <button @click="lastImg">上一張</button>
    <button @click="nextImg">下一張</button>
</div>

<script>
    let adc =new Vue({
        el:"#app",
        data:{
            currentSrc:"../static/picture/1.png",
            imgArr:[
                {id:1,src:"../static/picture/1.png"},
                {id:2,src:"../static/picture/2.jpg"},
                {id:3,src:"../static/picture/3.jpeg"},
                {id:4,src:"../static/picture/4.jpg"},
                {id:5,src:"../static/picture/5.jpg"},
                {id:6,src:"../static/picture/6.jpg"},
            ],
            imgIndex:0,
            timer:null,
        },
        created(){
            this.timer= setInterval(this.nextImg,2000)
        },
        computed:{
            reverseStr:{
                set:function (newValue) {

                },
                get:function () {

                }
            }
        },
        methods:{
            currentChange(item){
                this.currentSrc=item.src;

            },
            lastImg(){
                if(this.imgIndex==0){
                    this.imgIndex=this.imgArr.length
                }
                this.imgIndex--;
                this.currentSrc=this.imgArr[this.imgIndex].src

            },
            nextImg(){
                if(this.imgIndex==this.imgArr.length-1){
                    this.imgIndex=-1

                }
                this.imgIndex++;
                this.currentSrc=this.imgArr[this.imgIndex].src
            },
            closeTime(){
                clearInterval(this.timer);
            },
            openTime(){
                this.timer=setInterval(this.nextImg,2000);
            }
        }

    })
</script>
</body>
</html>

 

相關推薦

用Vue實現一個簡單的輪播效果

Vue實現簡單的輪播效果，用的的一些常用系統指令： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

用Vue實現一個簡單的圖片輪播

本文已收錄至https://github.com/likekk/studyBlog歡迎大家star，共同學習，共同進步。如果文章有錯誤的地方，歡迎大家指出。後期將在將GitHub上規劃前端學習的路線和資源分享。 寫在前面 每一篇文章都希望您有所收穫，每一篇文章都希望您能靜下心來瀏覽、閱讀。每一篇文章

寫了一個簡單輪播效果實現

char line query span size html ef6 ava top <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue中實現簡單輪播效果

html：<div class="cate-main"> <div class="carousel-contain"> <--圖片部分--> <ul class="carousel-wrap transition"&

使用vue的v-show和transition制作一個簡單輪播圖

leave int item hang 動畫效果 ansi this items current <template> <!--輪播圖--> <div class="carousel-wrap" id="carousel"> &

簡單實現一個圖片輪播

（注意要將圖片替換為你自己的圖片） public class MainActivity extends Activity { private ViewPager mViewPaper; private List<ImageView> images; private List&

簡單三步實現banner的輪播效果

目前有很多人使用Axure做輪播效果，步驟略複雜了些。這裡，拋開其他設計原型不說，只說說banner圖片輪播，三步教你實現輪播效果，我用的原型圖軟體是Mockplus。 把圖片準備好，要開始了。 第一步：拖出“圖片輪播”元件到工作區 第二步：雙擊“圖片輪播”元件 點選“+

vue2.0引用vue-awesome-swiper外掛實現左右滑動輪播效果

首先需要下載依賴npm install vue-awesome-swiper --save 同時引入css樣式 <link rel="stylesheet"  href="/static/css/swiper.min.css" charset="utf-8">

用JS實現一個簡單的加減購物車效果

 1.書寫input輸入框作為加減實現的效果。 2.加減按鈕用button按鈕來實現 3.利用js控制i的值作為輸入框中的值。 實現的效果： 完整程式碼如下： <!DOCTYPE html> <html> <head>

用Vue實現一個全選指令

lld http 做了 hbm n) 功能 sin fur sbc 最近用vue做了兩個項目，都需要實現全選反選的功能，兩個項目用了兩種實現方法，第一個項目用vue的computed，第二個項目用指令來實現，用起來，發覺指令更加方便。 第一次做全選的時候是剛開始接觸vue不

實現廣告圖片輪播效果-AndroidImageSild

left anim wpa img listener pri des indicator ext 在AS中的使用： 1.在build文件中進行配置 compile ‘com.squareup.picasso:picasso:2.3.2‘ comp

用java實現一個簡單的單用戶登陸功能的思路

get 單用戶 這樣的 簡單的 lock ref 數據庫 清除 一個 引用 所謂“單用戶單賬戶登錄”是指：在同一系統中，一個用戶名不能在兩個地方同時登錄。 我們參照 QQ 實現效果：當某賬號在 A 處登錄後，在未退出的情況下，如果再到 B 處登錄，那麽，系統會擠下 A 處

用 C# 實現一個簡單的 Rest Service 供外部調用

message [] operation rem adk www span method title 用 C# 實現一個簡單的 Restful Service 供外部調用，大體總結為4點： The service contract (the methods it o

實現圖片的輪播效果

parse ice mov ppi oos image black new app 實現圖片的輪播效果 1.顯示頁面：index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"

用 Vue 做一個簡單的購物app

有意思 應用程序 其中 ins com 簡單的 node.js 引入 大神 前言 最近在學習Vue的使用。看了官方文檔之後，感覺挺有意思的。於是著手做了一個簡單的購物app。這是我第一次在這個網站上寫分享，如有不當之處，請多多指教。 一整個項目寫下來，最大的感覺就是組件式開

使用CSS實現一個簡單的幻燈片效果

方法一： 簡單的CSS程式碼實現幻燈片效果 話不多說，直接上程式碼 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>C

自己用-Netty-實現一個簡單的-RPC

  轉自：http://thinkinjava.cn/2018/03/%E8%87%AA%E5%B7%B1%E7%94%A8-Netty-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84-RPC/ 目錄： 需求

類方法實現：用python實現一個簡單的單詞本，添加/查找/刪除單詞。

end code div keys style 成功 move print utf 1.實現一個簡單的單詞本，功能： ①添加單詞，當所添加的單詞已存在時，讓用戶知道 ②查找單詞，當查找的單詞不存在時，讓用戶知道 ③刪除單詞，當刪除的單詞不存在時，讓用戶知道 以上

【人工智慧】用Python實現一個簡單的人臉識別，原來我和這個明星如此相似

近幾年來，興起了一股人工智慧熱潮，讓人們見到了AI的能力和強大，比如影象識別，語音識別，機器翻譯，無人駕駛等等。總體來說，AI的門檻還是比較高，不僅要學會使用框架實現，更重要的是，需要有一定的數學基礎，如線性代數，矩陣，微積分等。 幸慶的是，國內外許多大神都已經給我們造好“輪子”，我們可以直接來使用某些模型

【人工智能】用Python實現一個簡單的人臉識別，原來我和這個明星如此相似

數值 但是 智能 深度學習 lib python 數學 三方 python實現 近幾年來，興起了一股人工智能熱潮，讓人們見到了AI的能力和強大，比如圖像識別，語音識別，機器翻譯，無人駕駛等等。總體來說，AI的門檻還是比較高，不僅要學會使用框架實現，更重要的是，需要有一定的數