Vue.js實現(xiàn)點擊左右按鈕圖片切換

更新時間：2022年07月12日 17:25:45 作者：南城巷陌

這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)點擊左右按鈕圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue.js實現(xiàn)點擊左右按鈕圖片切換的具體代碼，供大家參考，具體內容如下

關于圖片切換，網(wǎng)上也有很多的說法，這邊通過參考給出了如下所示的解決方案

效果：

html

通過v-for循環(huán)展示圖片列表itemlist，將圖片路徑保存在data中的itemlist中，添加上下按鈕的點擊事件。

<template>
? <div>
? ? <div class="zs-adv">
? ? ? <a title="上一頁" :href="'#'" class="adv-pre" @click="leftScroll">上一個</a>
? ? ? <div id="adv-pad-scroll">
? ? ? ? <div class="adv-pad">
? ? ? ? ? <img
? ? ? ? ? ? ? class="adv-pad-item"
? ? ? ? ? ? ? v-for="(item, index) in itemlist"
? ? ? ? ? ? ? :key="index"
? ? ? ? ? ? ? alt=""
? ? ? ? ? ? ? :ref="`item${index}`"
? ? ? ? ? ? ? :src="item.src"
? ? ? ? ? />
? ? ? ? </div>
? ? ? </div>
? ? ? <a title="下一頁" :href="'#'"  class="adv-next" @click="rightScroll">下一個</a>
? ? </div>
? </div>
</template>

js

通過點擊事件去執(zhí)行響應過程

<script>
? export default {
? ? name: "index",
? ? components: {},
? ? data() {
? ? ? return {
? ? ? ? maxClickNum: 0, // 最大點擊次數(shù)
? ? ? ? lastLeft: 0, // 上次滑動距離
? ? ? ? clickNum: 0, // 點擊次數(shù)
? ? ? ? itemlist: [
? ? ? ? ? {
? ? ? ? ? ? id: 0,
? ? ? ? ? ? src: require("./image/1.png"),
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 1,
? ? ? ? ? ? src: require("./image/2.png"),
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 2,
? ? ? ? ? ? src: require("./image/3.png"),
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 3,
? ? ? ? ? ? src: require("./image/4.png"),
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 4,
? ? ? ? ? ? src: require("./image/5.png"),
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 5,
? ? ? ? ? ? src: require("./image/6.png"),
? ? ? ? ? },
? ? ? ? ],
? ? ? ? // imgx: 0,
? ? ? ? // form: this.$form.createForm(this, { name: "horizontal_login" }),
? ? ? };
? ? },
? ? //函數(shù)
? ? methods: {
? ? ? leftScroll() {
? ? ? ? if (this.clickNum > 0) {
? ? ? ? ? // 獲取當前元素寬度
? ? ? ? ? console.log(document.querySelectorAll(".adv-pad-item"));
? ? ? ? ? let width =
? ? ? ? ? ? document.querySelectorAll(".adv-pad-item")[this.clickNum - 1]
? ? ? ? ? ? ? .offsetWidth;
? ? ? ? ? // 公示：滾動距離（元素的magin-left值） = 它自己的長度 + 上一次滑動的距離
? ? ? ? ? console.log(document.getElementsByClassName("adv-pad"));
? ? ? ? ? document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
? ? ? ? ? ? this.lastLeft + width
? ? ? ? ? }px`;
? ? ? ? ? this.lastLeft = width + this.lastLeft;
? ? ? ? ? // 點擊次數(shù)-3
? ? ? ? ? this.clickNum = this.clickNum - 1;
? ? ? ? ? // 如果點擊次數(shù)小于最大點擊次數(shù)，說明最后一個元素已經不在可是區(qū)域內了，顯示右箭頭
? ? ? ? ? if (this.clickNum < this.maxClickNum) {
? ? ? ? ? ? this.showRightIcon = true;
? ? ? ? ? }
? ? ? ? }
? ? ? },
? ? ? rightScroll() {
? ? ? ? // 如果點擊次數(shù)小于數(shù)組長度-1時，執(zhí)行左滑動效果。
? ? ? ? if (this.clickNum < this.itemlist.length - 1) {
? ? ? ? ? // 獲取當前元素寬度
? ? ? ? ? let width =
? ? ? ? ? ? document.querySelectorAll(".adv-pad-item")[this.clickNum].offsetWidth;
? ? ? ? ? // 獲取最后一個元素距離左側的距離
? ? ? ? ? let lastItemOffsetLeft =
? ? ? ? ? ? document.getElementsByClassName("adv-pad-item")[
? ? ? ? ? ? this.itemlist.length - 1
? ? ? ? ? ? ? ].offsetLeft;
? ? ? ? ? // 獲取可視區(qū)域寬度
? ? ? ? ? const lookWidth = document.getElementById("adv-pad-scroll").clientWidth;
? ? ? ? ? // 如果最后一個元素距離左側的距離大于可視區(qū)域的寬度，表示最后一個元素沒有出現(xiàn)，執(zhí)行滾動效果
? ? ? ? ? if (lastItemOffsetLeft > lookWidth) {
? ? ? ? ? ? // 公示：滾動距離（元素的magin-left值） = 負的它自己的長度 + 上一次滑動的距離
? ? ? ? ? ? document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
? ? ? ? ? ? ? -width + this.lastLeft
? ? ? ? ? ? }px`;
? ? ? ? ? ? this.lastLeft = -width + this.lastLeft;
? ? ? ? ? ? // 點擊次數(shù)+3
? ? ? ? ? ? this.clickNum += 1;
? ? ? ? ? ? // 記錄到最后一個元素出現(xiàn)在可視區(qū)域時，點擊次數(shù)的最大值。用于后面點擊左側箭頭時判斷右側箭頭的顯示
? ? ? ? ? ? this.maxClickNum = this.clickNum;
? ? ? ? ? }
? ? ? ? ? this.showRightIcon = lastItemOffsetLeft > lookWidth + width;
? ? ? ? }
? ? ? },
? ? },
? };
</script>

css

<style lang="less" scoped>
? .zs-adv {
? ? margin: 50px auto 0;
? ? width: 1272px;
? ? height: 120px;
? ? background: url("./image/adv-bg.png") top center no-repeat;
?
? ? a {
? ? ? margin-top: 58px;
? ? ? width: 16px;
? ? ? height: 24px;
? ? ? opacity: 0.8;
? ? }
?
? ? a:hover {
? ? ? opacity: 1;
? ? }
?
? ? .adv-pre {
? ? ? float: left;
? ? ? margin-right: 20px;
? ? }
?
? ? .adv-next {
? ? ? float: right;
? ? }
?
? ? #adv-pad-scroll {
? ? ? float: left;
? ? ? width: 1200px;
? ? ? overflow: hidden;
? ? ? .adv-pad {
? ? ? ? width: 2400px;
? ? ? ? height: 120px;
? ? ? ? .adv-pad-item {
? ? ? ? ? padding: 20px 10px 0px 10px;
? ? ? ? ? width: 400px;
? ? ? ? ? height: 100px;
? ? ? ? ? cursor: pointer;
? ? ? ? ? animation: all 1.5s;
? ? ? ? }
?
? ? ? ? .adv-pad-item:hover {
? ? ? ? ? padding: 10px 5px 0px 10px;
? ? ? ? }
? ? ? }
? ? }
? }
</style>

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

您可能感興趣的文章: