用vue写一个仿简书的轮播图

原文地址:Bougie的博客

1.先展示最终效果:

2.解决思路

Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果。写好css样式,只需改变每张图片的class即可实现轮播效果。动画效果交给transition完成。可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示:

3.代码实现

各个slide的样式:

$width: 800px;      // 容器宽度
$height: 300px;     // 容器高度
$bWidth: 500px;     // 大图片宽度
$sWidth: $width - $bWidth;  // 小图片宽度
$sHeight: $height / 2;  // 小图片高度
#slider-wrapper{
    width: $width;
    height: $height;
    margin: 0 auto;
    cursor: pointer;
    background: #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.117647), 0 1px 4px rgba(0,0,0,0.117647);
    display: flex;
    overflow: hidden;
    div{
        display: inline-block;
    }
}
.main-slide{
    width: $bWidth;
    height: $height;
    float: left;
    transition: all .4s ease;
}
.extra-slide{
    width: $sWidth;
    position: relative;
    .extra-slide-item{
        position: absolute;
        width: $sWidth;
        height: $sHeight;
        left: 0;
        transition: .4s ease-out;
    }
    .extra-slide-top{
        top: -$sHeight;
    }
    .extra-slide-middle-first{
        top: 0;
        z-index: 2
    }
    .extra-slide-middle-second{
        top: $sHeight;
        z-index: 2
    }
    .extra-slide-bottom{
        top: $height
    }
    .extra-slide-hide{
        display: none!important;
    }
}

模板包含两个轮播图:

<div id="slider-wrapper" @mouseover="stop" @mouseout="start">
    <!-- 轮播图1,mainSlide -->
    <div class="main-slide" :style="`background: url(${slideConfig[nowIndex].src})`"></div>
    <!-- 轮播图2,extraSlide -->
    <div class="extra-slide">
        <div class="extra-slide-item" :class="slideClass(i)" v-for="(v, i) in slideConfig" :key="i" :style="`background: url(${v.src}); background-size: cover`"></div>
    </div>
</div>

scripts部分,设置一个nowIndex,定时改变nowIndex。所有图片的class根据这个nowIndex来变化,这里使用了es6的map类型,详情点击:http://es6.ruanyifeng.com/#do...

export default {
    name: ‘slider‘,
    data: function() {
        return {
            slideInterval: null,
            nowIndex: 0,
            slideLength: this.slideConfig.length
        }
    },
    props: {
        slideConfig: {
            type: Array
        }
    },
    methods: {
        // 限制index不能超出图片列表长度
        resetIndex(i) {
            return i > this.slideLength - 1 ? i - this.slideLength : i
        },
        slideClass(i) {
            let nowIndex = this.nowIndex
            // Map就是key也可以是非字符串的对象,不用Map多写几个 if else 也可以
            let map = new Map([
                [this.resetIndex(nowIndex), ‘extra-slide-top‘],
                [this.resetIndex(nowIndex + 1), ‘extra-slide-middle-first‘],
                [this.resetIndex(nowIndex + 2), ‘extra-slide-middle-second‘],
                [this.resetIndex(nowIndex + 3), ‘extra-slide-bottom‘]
            ])
            // 图片的class根据nowIndex的变化而变化
            return map.get(i) ? map.get(i) : ‘extra-slide-hide‘
        },
        start() {
            // 定时改变nowIndex
            this.slideInterval = setInterval(() => {
                this.nowIndex = this.nowIndex > this.slideLength - 2 ? 0 : this.nowIndex + 1
                console.log(this.nowIndex)
            }, 2000)
        },
        stop() {
            clearInterval(this.slideInterval)
            this.slideInterval = null
        }
    },
    mounted() {
        this.start()
    },
    destroyed() {
        this.stop()
    }
}

slideConfig,组件的props:

const prefix = ‘/src/assets/‘
const slideConfig = [{
  src: prefix + ‘s1.jpg‘,
  title: ‘图1‘,
  desc: ‘说明1‘
}, {
  src: prefix + ‘s2.jpg‘,
  title: ‘图2‘,
  desc: ‘说明2‘
}, {
  src: prefix + ‘s3.jpg‘,
  title: ‘图3‘,
  desc: ‘说明3‘
}, {
  src: prefix + ‘s4.jpg‘,
  title: ‘图4‘,
  desc: ‘说明4‘
}, {
  src: prefix + ‘s5.jpg‘,
  title: ‘图5‘,
  desc: ‘说明5‘
}, {
  src: prefix + ‘s6.jpg‘,
  title: ‘图6‘,
  desc: ‘说明6‘
}]
export default slideConfig

使用:

<slider :slideConfig="slideConfig" />

2018/3/12 16:55 : slideConfig已修改成Props,提取slider.vue就可以直接用了

gitHub传送门:https://github.com/bougieL/ji...

个人博客网站:http://www.bougieblog.cn,欢迎大佬们关注

原文地址:https://www.cnblogs.com/jlfw/p/11969944.html

时间: 2024-10-10 21:54:38

用vue写一个仿简书的轮播图的相关文章

Html5如何快速在页面中写出多个轮播图效果

我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里我们就可以借助插件来实现这一功能,swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g

vue使用插件做轮播图

vue使用 vue-awesome-swiper制作轮播图. 1.访问github,搜索vue-awesome-swiper,查看用法. 第一个坑:github居然访问不了. 解决办法:参考别人 https://www.cnblogs.com/Owen-ET/p/10868620.html 其实访不访问都没关系,照着下面步骤来就可以了. 2.安装 vue-awesome-swiper指定版本 第二个坑:必须用这个版本,要不然后面很多bug了. npm i [email protected] --

记一个好用的轮播图的FlexSlider

之前给自己公司的主页套用过一个js动态生成的轮播图,但是从载入的时机和载入后的效果都不太理想,又懒得去优化了,这次偶然遇到一个比较不错的轮播图的js插件,记录之. 首先它是给予jquery的,引进jquery和jquery.flexslider-min.js,然后定义div范围,在div内定义好要轮播的ul和li标签,然后设置flex参数渲染即可.不多说,上代码 <html> <body> <div class="flexslider"> <u

Vue学习—Vue写一个图片轮播组件

1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容. 2.每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用. 3.基本要求:页面加载,自动播放.鼠标悬停,停止播放.鼠标离开,继续播放 点击左右箭头切换上一张,下一张图片. 下方小圆点显示当前位第几张图片. 4.使用Vue实现,想法: 5.示例代码 结构html: <template>

一个仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图类库

前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下篇中进行分析出来, 一个仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图类库,  github地址: https://github.com/hejunlin2013/SuperIndicator , 如果觉得还行,欢迎点个star. SuperIndicator a superindicatorlibray for viewpager, banner 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图 专业轮播图库,没有之一 也可以应用于广告

用jq代码写出一个轮播图。

由于项目的需要,需要写出一个图片预览的功能,在预览的同时如果预览的图片大于1,还要能够轮播,.所以,这就是一个从后台取图片的路径,然后轮播的一个功能.  当图片数为1时,不显示左右箭头以及轮播圆点. 下面是一个gif的demo: 首先,我们理清了实现的方式.我们先做出一个轮播图的效果. DEMO地址:https://codepen.io/Dios/pen/dzLMVJ 然后我们再通过一些js判断达到图中的效果.

一步一步拆解一个简单的iOS轮播图(三图)

导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... 我第一次项目中需要使用轮播图的时候我是用的别人写好的一个轮子,那个轮播封装很多东西,包括比如可以设置pageControl的位置,可以传图片url或本地图片,缓存网络图片等等.但是我觉得没必要搞那么复杂,我喜欢简单并足够做事的东西.现在有时间便想自己把它拆解一下.看了一些简书上一些作者写的关于轮播图

仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图介绍(一)

请尊重分享成果,转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52327435 前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下篇中进行分析出来, 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图github地址: https://github.com/hejunlin2013/SuperIndicator , 如果觉得还行,欢迎点个star. SuperIndicator a superindicatorlibray fo

vue上的简单轮播图

好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用.moveLeft向左移动一个格子,造成滚动的假象,此时第二张图在第一个格子的位置: 这时候把第一个格子 li 的元素摘下接到 ul 末尾,并马上撤掉.moveLeft.每张图都在自己的格子上. 定时器循环该操作,一直轮播.可以用touch事件添加touchmove左右滑动效果和切换图片的功能,就不