用Vue.js實現點擊左右按鈕圖片切換代碼演示

3403771864 發布于2022-10-26 22:15 / 868人閱讀

　　本篇文章就是講述Vue.js實現點擊左右按鈕圖片切換的具體代碼，具體內容如下：

　　從多種角度實現展示給大家。

　　效果：

　　html

　　通過v-for循環展示圖片列表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

　　通過點擊事件去執行響應過程

　<script>
　　export default {
　　name: "index",
　　components: {},
　　data() {
　　return {
　　maxClickNum: 0, // 最大點擊次數
　　lastLeft: 0, // 上次滑動距離
　　clickNum: 0, // 點擊次數
　　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" }),
　　};
　　},
　　//函數
　　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;
　　// 點擊次數-3
　　this.clickNum = this.clickNum - 1;
　　// 如果點擊次數小于最大點擊次數，說明最后一個元素已經不在可是區域內了，顯示右箭頭
　　if (this.clickNum < this.maxClickNum) {
　　this.showRightIcon = true;
　　}
　　}
　　},
　　rightScroll() {
　　// 如果點擊次數小于數組長度-1時，執行左滑動效果。
　　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;
　　// 獲取可視區域寬度
　　const lookWidth = document.getElementById("adv-pad-scroll").clientWidth;
　　// 如果最后一個元素距離左側的距離大于可視區域的寬度，表示最后一個元素沒有出現，執行滾動效果
　　if (lastItemOffsetLeft > lookWidth) {
　　// 公示：滾動距離（元素的magin-left值） = 負的它自己的長度 + 上一次滑動的距離
　　document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
　　-width + this.lastLeft
　　}px`;
　　this.lastLeft = -width + this.lastLeft;
　　// 點擊次數+3
　　this.clickNum += 1;
　　// 記錄到最后一個元素出現在可視區域時，點擊次數的最大值。用于后面點擊左側箭頭時判斷右側箭頭的顯示
　　this.maxClickNum = this.clickNum;
　　}
　　this.showRightIcon = lastItemOffsetLeft > lookWidth + width;
　　}
　　},
　　},
　　};
　　</script>

　　css

　　<style 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>

本篇文章已講述完畢，歡迎大家關注更多后續內容。

云服務器 GPU云服務器 js菜單左右切換代碼 js實現按鈕點擊 asp圖片左右代碼 php點擊圖片切換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/128212.html

task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

cnTomato 2019-08-22 10:59 評論0 收藏0
task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

趙春朋 2019-08-01 15:00 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

wqj97 2019-08-21 17:38 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

FingerLiu 2019-08-01 18:01 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

MadPecker 2019-08-29 13:49 評論0 收藏0