国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

vue實(shí)現(xiàn)圖片滾動的示例代碼(類似走馬燈效果)

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 22:18:05
文檔

vue實(shí)現(xiàn)圖片滾動的示例代碼(類似走馬燈效果)

vue實(shí)現(xiàn)圖片滾動的示例代碼(類似走馬燈效果):上次寫了一個簡單的圖片輪播,這個相當(dāng)于在上面的一些改進(jìn)。這個組件除了可以進(jìn)行圖片滾動外,也可以嵌入任何內(nèi)容的標(biāo)簽進(jìn)行滾動,里面用了slot進(jìn)行封裝。 父: <template> <div id=app> <er-carousel-index :type
推薦度:
導(dǎo)讀vue實(shí)現(xiàn)圖片滾動的示例代碼(類似走馬燈效果):上次寫了一個簡單的圖片輪播,這個相當(dāng)于在上面的一些改進(jìn)。這個組件除了可以進(jìn)行圖片滾動外,也可以嵌入任何內(nèi)容的標(biāo)簽進(jìn)行滾動,里面用了slot進(jìn)行封裝。 父: <template> <div id=app> <er-carousel-index :type

上次寫了一個簡單的圖片輪播,這個相當(dāng)于在上面的一些改進(jìn)。這個組件除了可以進(jìn)行圖片滾動外,也可以嵌入任何內(nèi)容的標(biāo)簽進(jìn)行滾動,里面用了slot進(jìn)行封裝。

父:

<template>
 <div id="app">
 <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/index.json" :isOrNotButton=false>
 <template scope="props">-----使用子組件傳過來的值,封裝slot
 <div class="articleList-box-photo ">
 <div class="tu imageEffectsAnimate imageEffects_Magnifier">
 <a>
 <img class="minMax" :src="props.item.img">
 </a>
 </div>
 </div>
 <div class="articleList-box-title">
 <div class="title">
 <a class="textleft">{{props.item.title}}</a>
 </div>
 </div>
 </template>
 </er-carousel-index>
 </div>
</template>
<script>
 import ErCarouselIndex from './components/carouselIndex/src/carouselIndex.vue'
 export default {
 name: 'app',
 data() {
 }
 },
 components: {
 ErCarouselIndex//一定要進(jìn)行組件聲明,不然不能引用子組件
 }
 }
</script>

子組件:

<template>
 <div tag="div" class="articleList articleListMod-3 er-carouseindex" name="slide-fade" id="articleList" :style="{height:imgHeight+'px'}" >
 <span id="btn1" class="er-carouseindex-left" @mousedown="imgMove('mouseLeft')" @mouseup="cancelMove('left')" v-show="isOrNotButton"></span>
 <span id="btn2" class="er-carouseindex-right" @mousedown="imgMove('mouseRight')" @mouseup="cancelMove('right')" v-show="isOrNotButton"></span>
 <div id="packageAll" class="er-carouseindex-con" @mouseover="clearAuto" @mouseout="slideAuto">
 <div class="er-carouseindex-bar" v-show="isOrNotCircle">
 <div v-for="(item,dex) in imgList" @mouseup="clearAuto" class="er-carouseindex-circle" @click="circleClick(dex)" :class="{circleSelected:dex===indexCircle}">
 </div>
 </div>
 <div id="imageAll" class="er-carouseindex-item" :style="{transform:translateX,transition:transFlag?transitionTime:''}">
 <div class="articleList-box er-carouseindex-box" v-for="(list,index) in imgLisShow" :style="{width:imgWidth+'%'}"
 style="max-height:50%;">
 <slot :item="list"></slot>
 </div>
 </div>
 </div>
 </div>
</template>
<script>
 export default
 {
 name: "ErCarouselIndex",
 data(){
 return {
 imgList: [],//請求接口數(shù)據(jù)
 imgLisShow: [],//圖片滾動數(shù)據(jù),包括左中右三種
 timer: null,//自動循環(huán)滾動時的間隔時間
 timeout:null,//長按時的圖片滾動間隔時間
 index:0,//圖片索引
 translateXnum:0,//圖片滾動時的偏移量
 translateX:"",//生成圖片偏移時的表達(dá)式
 imgWidth:"",//圖片所占寬度
 timeDown:"",//鼠標(biāo)剛按下時的時間
 timeup:"",//鼠標(biāo)松開時的時間
 clickSpace:"",//鼠標(biāo)按下松開的時間間隙
 transFlag:true,//是否勻速滾動,
 transitionTime:"",
 indexCircle:0//小圓圈滾動索引
 }
 },
 props:{
 duration:0,//圖片延時滾動
 typeNumber:0, //每次滾動幾張
 timeSpace:0, //圖片滾動時間間隔
 url:String,//請求接口地址
 pageNumber:0,//當(dāng)前頁面顯示幾張圖片
 isOrNotButton:true,//是否顯示左右按鈕
 isOrNotCircle:true,//是否顯示小圓圈
 imgHeight:""http://圖片滾動顯示高度
 },
 watch:{
 index:{
 handler(){
 var _this=this;
 if(Math.abs(this.index)==this.imgList.length){
 this.indexCircle=0;
 setTimeout(function(){
 _this.reset();
 },_this.duration*1000*0.98);
 }else{
 this.indexCircle=this.index;
 }
 this.calcXnum();
 }
 },
 translateXnum:{
 handler(){
 this.translateX="translateX("+this.translateXnum+"%)";
 }
 }
 },
 methods:{
 //頁面初始化復(fù)賦值
 imgView:function() {
 var _this = this;
 _this.$http.get(_this.url).then(function (res) {
 _this.imgList = res.data.imgList;
 for(var i=0;i<3;i++){
 _this.imgList.forEach(function (item, index) {
 _this.imgLisShow.push(item);
 });
 }
 _this.reset();
 _this.slideAuto();
 _this.imgWidth=(100/_this.pageNumber)-1;
 _this.transitionTime="all "+_this.duration*0.98+"s linear";
 console.log(_this.transitionTime);
 });
 },
 //圖片滾動方法(長按)
 imgMove:function(direct){
 var _this = this;
 _this.timeDown=new Date();//記錄按下的時間
 _this.timeout = setInterval(function() {
 if(direct=="mouseLeft") {
 _this.leftMove();
 }else{
 _this.rightMove();
 }
 },300);
 },
 //鼠標(biāo)送開時執(zhí)行的方法
 cancelMove:function(direct){
 var _this = this;
 _this.clearAuto();
 this.timeup=new Date();//記錄松開的時間
 this.clickSpace=this.timeup.getTime() - this.timeDown.getTime();
 //時間間隔小于500毫秒為點(diǎn)擊,反之為長按
 if(this.clickSpace<500){
 for(var i=0;i<_this.typeNumber;i++){
 if(direct=="left"){
 _this.leftMove();
 }else{
 _this.rightMove();
 }
 }
 }
 if (this.timeout) {
 clearInterval(this.timeout);
 this.timeout = null;
 }
 },
 //向左移動
 leftMove:function(){
 this.index--;
 this.transFlag=true;
 },
 //向右移動
 rightMove:function(){
 this.transFlag=true;
 this.index++;
 },
 slideAuto:function () {
 var _this = this;
 _this.timer = setTimeout(function () {
 if(Math.abs(_this.index)!==_this.imgList.length){
 _this.rightMove();
 _this.slideAuto();
 }
 }, _this.timeSpace * 1000);
 },
 clearAuto:function () {
 console.log("停止");
 if (this.timer) {
 clearInterval(this.timer);
 this.timer = null;
 }
 },
 //重置
 reset:function(){
 this.index=0;
 this.transFlag=false;
 this.calcXnum();
 },
 calcXnum:function(){
 var _this=this;
 this.translateXnum=-(this.index+this.imgList.length)*(100/this.pageNumber);
 },
 //點(diǎn)擊圓圈跳轉(zhuǎn)圖片
 circleClick:function(dex){
 this.index=dex;
 this.clearAuto();
 }
 },
 mounted()
 {
 this.$nextTick(function () {
 this.imgView();
 });
 }
 }
</script>

這個組件相對來說功能比較完整,用戶可以通過傳參來控制當(dāng)前頁面需要顯示幾張圖片,圖片滾動時間間隔,是否顯示左右點(diǎn)擊按鈕等等,詳細(xì)參數(shù)可以查看props,里面都有注釋。

以上這篇vue實(shí)現(xiàn)圖片滾動的示例代碼(類似走馬燈效果)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vue實(shí)現(xiàn)圖片滾動的示例代碼(類似走馬燈效果)

vue實(shí)現(xiàn)圖片滾動的示例代碼(類似走馬燈效果):上次寫了一個簡單的圖片輪播,這個相當(dāng)于在上面的一些改進(jìn)。這個組件除了可以進(jìn)行圖片滾動外,也可以嵌入任何內(nèi)容的標(biāo)簽進(jìn)行滾動,里面用了slot進(jìn)行封裝。 父: <template> <div id=app> <er-carousel-index :type
推薦度:
標(biāo)簽: VUE 效果圖 示例代碼
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 欧美一区二区在线观看 | 夜色毛片永久免费 | 亚洲欧美日韩精品高清 | 欧美成人看片一区二区三区尤物 | 成人久久久 | 久久91精品国产99久久yfo | 亚洲欧美日韩国产综合高清 | 日韩视频中文字幕专区 | 免费在线中文字幕 | 欧美另类精品一区二区三区 | 久久免费国产精品一区二区 | 国产91久久久久久久免费 | 99精品视频在线观看免费 | 欧美日韩亚洲国产无线码 | 国产精品免费网站 | 久久亚洲精品国产精品婷婷 | 一级毛片免费视频观看 | 伊人操| 国产91免费 | 可以免费看的毛片 | 日韩欧美爱爱 | 在线观看香蕉视频 | 日韩国产另类 | 国产成人一区二区三区在线播放 | 最新国产在线观看 | 国产91在线 | 中文 | 欧美视频精品一区二区三区 | 91久久精品一区二区三区 | 国产三级一区二区 | 欧美激情亚洲激情 | 国产成人精品一区二三区 | 欧美极品尤物在线播放一级 | 国产日产高清欧美一区二区三区 | 欧美精品啪啪 | 亚洲v欧美| 91亚洲国产成人久久精品网站 | 亚洲精品免费在线 | 国产毛片一区二区 | 亚洲国产成人久久一区www妖精 | 国产成人综合精品一区 | 真实的和子乱拍在线观看 |