turn.js 模版简单使用

news2024/11/29 10:41:57

turn.js 不修改添加原功能仅 替换、修改图片格式使用模版

HTML文件

turn.js官网:http://www.turnjs.com/#

第一步

1.点击链接去到官网  

2.点击下载按钮  下载左侧示例压缩包

3.解压完成拿到示例文件 turnjs4

4.在samples目录下案例中查看意向使用的模版样式  

        注:点击进入文件后里面的html文件可以直接访问

5.将整个turnjs4拖拽到编辑器中  多余的文件最好等修改完以后再删除

6.在页面最下方 找到引用的js文件 

7.  只替换图片不做太大改动的话  到js文件里面 直接搜jpg  模版默认用的是jpg图片

将图片格式修改为自己图片的格式  这个地方就是图片引用的代码 动态渲染的

8.这个地方的png是 点击下方滚动条显示的小图片  里面的宽高是控制小图片大小的

9.总共有多少个单张页面  从1开始  多少张单张页面在这个地方循环遍历 动态加入

就这几个地方改一下就行了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1172082.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenGL_Learn05(纹理)

1. 纹理贴图 wall.jpg (512512) (learnopengl-cn.github.io) 纹理过滤分为:邻近和线性,这跟opencv图像处理一样。 多级渐远纹理 四种采样方式: 代码实现: std_image.h https://github.com/nothings/stb/blob/master/stb_image.…

【数据结构】冒泡排序 (码源实现)

冒泡排序 前言一、冒泡排序运行图例二、算法实现基本思路三、算法实现步骤四、算法码源详解五、冒泡排序效率分析(一)时间复杂度——O(N^2)(二)空间复杂度——O(1)(三&am…

【PC电脑windows-学习样例tusb_serial_device-ESP32的USB模拟串口程序+VScode建立工程+usb组件添加+-基础样例学习】

【PC电脑windows-学习样例tusb_serial_device-ESP32的USB模拟串口程序-基础样例学习】 1、概述2、实验环境3-1、 物品说明3-2、所遇问题:ESP32 cannot open source file "tinyusb.h"或者“tinyusb.h:No such file or directory ....”3-3、解决问题&#…

【多线程】静态代理

当使用静态代理模式时,我们会有一个真实的对象(RealSubject),一个代理对象(ProxySubject),代理对象将请求转发给真实对象,并可以在请求前后执行额外的操作。 真实对象和代理对象要实…

【LeetCode刷题-队列】--2073.买票需要的时间

2073.买票需要的时间 方法一&#xff1a;使用队列 class Solution {public int timeRequiredToBuy(int[] tickets, int k) {Queue<TicketBuyer> queue new LinkedList<>();for(int i 0;i<tickets.length;i){TicketBuyer buyer new TicketBuyer();buyer.inde…

Linux----------------Shell重定向输入输出

&#xff08;一&#xff09; 标准输入 以键盘读取用户输入的数据&#xff0c;然后再把数据拿到 Shel程序中使用。 标准输出 Shell 程序产生的数据&#xff0c;这些数据一般都是呈现到显示器上供用户浏览查看 输入输出重定向 输入方向就是数据从哪里流向程序。数据默认从键…

【LeetCode刷题-队列与栈】--225.用队列实现栈

225.用队列实现栈 class MyStack {Queue<Integer> queue1;Queue<Integer> queue2;public MyStack() {queue1 new LinkedList<Integer>();queue2 new LinkedList<Integer>();}public void push(int x) {queue2.offer(x);while(!queue1.isEmpty()){que…

SpringBoot + Vue2项目打包部署到服务器后,使用Nginx配置SSL证书,配置访问HTTP协议转HTTPS协议

配置nginx.conf文件&#xff0c;这个文件一般在/etc/nginx/...中&#xff0c;由于每个人的体质不一样&#xff0c;也有可能在别的路径里&#xff0c;自己找找... # 配置工作进程的最大连接数 events {worker_connections 1024; }# 配置HTTP服务 http {# 导入mime.types配置文件…

typeScript基础使用与进阶

typeScript基础使用与进阶 一、初始typeScript1.1 js的超集1.2 编译器编译为js代码1.3 完全兼容js1.4 静态类型检查器 二、ts的安装与编译2.1 ts的安装2.2 ts编译成js2.2.1 手动编译2.2.2 自动编译 三、ts基础使用3.1 类型声明3.1.1 基础类型3.1.2 数组3.1.3 对象3.1.4 any类型…

bug: https://aip.baidubce.com/oauth/2.0/token报错blocked by CORS policy

还是跟以前一样&#xff0c;我们先看报错点&#xff1a;&#xff08;注意小编这里是H5解决跨域的&#xff0c;不过解决跨域的原理都差不多&#xff09; Access to XMLHttpRequest at https://aip.baidubce.com/oauth/2.0/token from origin http://localhost:8000 has been blo…

错误号码2058 Plugin caching_sha2_password could not be loaded:vX八白白白白白令自砸

sqlyog连接数据库时报错&#xff1a; 错误号码2058 Plugin caching_sha2_password could not be loaded:vX八白白白白白令自砸 网上查了资料&#xff0c;是MySQL 从 8.0 版本开始加密方式改变导致的原因。具体的咋也不再这里分析了&#xff0c;就直说如何解决这个问题。下面三…

由于找不到vcruntime140.dll无法继续执行代码

在计算机使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“vcruntime140.dll丢失”。这个错误通常发生在运行某些程序或游戏时&#xff0c;它会导致程序无法正常运行。那么&#xff0c;如何解决vcruntime140.dll丢失的问题呢&#xff1f;本文将介绍…

基于单片机的滚筒洗衣机智能控制系统设计

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、系统整体设计方案2.1控制系统的功能2.2设计的主要内容 二、硬件设计3.1 控制系统整体框图3.2 电源电路 三 软件设计主程序设计仿真设计 四、 结论 概要 因此我们需要一个完善的智能系统来设计一个全自动滚筒洗…

【unity实战】教你轻松构建对话系统

先来看最终效果 前言 欢迎来到我们的Unity实战教程系列。在这一篇中&#xff0c;我们将深入探讨如何在Unity中构建一个对话系统。 对话系统是许多游戏中不可或缺的一部分&#xff0c;特别是在角色扮演游戏&#xff08;RPG&#xff09;、冒险游戏和视觉小说等类型中。它们为玩…

selenium自动化测试入门 —— python unittest单元测试框架

unittest又名PyUnit&#xff0c; Python单元测试框架&#xff08;The Python unit testing framework&#xff09;&#xff0c;简称为PyUnit。自从 Python 2.1 版本后&#xff0c;PyUnit成为 Python标准库的一部分。 为什么需要使用unittest单元测试框架&#xff1f; 当我们写…

MIT6.5830 Lab1-GoDB实验记录(五)

MIT6.5830 Lab1-GoDB实验记录&#xff08;五&#xff09; – WhiteNights Site 标签&#xff1a;Golang 完成了Exercise 1&#xff0c;还有四个Exercise在等着我&#xff0c;慢慢来吧。 实验准备 了解缓冲池 缓冲池&#xff0c;俗称BP。相关的概念还有数据页和缓存页。页&…

VueX 模块化和namespace

当我们的项目很大的时候&#xff0c;VueX中的代码会越来越多&#xff0c;会有处理数据的&#xff0c;处理人员列表的&#xff0c;处理订单的... 如果我们将这些东西都写在一个state、actions和mutations中的话&#xff0c;就非常不方便后期的维护。 所以我们引入了VueX的模块…

Linux的指令和用途(持续更新)

1. 基本指令&#xff1a; 概念介绍&#xff1a; 1. 目录&#x1f7f0;文件夹 Linux指令用法说明who查看哪些人登陆我的机器whoami (who am i)查看当前账号是谁 pwd 查看当前我所在的目录clear 清屏 tree 目录名&#xff08;文件夹名&#xff09;以树形结构列出该文件夹下的所有…

深度学习之基于Tensorflow人脸面部表情识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 基于Tensorflow的人脸面部表情识别系统是一种基于深度学习技术的图像处理应用&#xff0c;该系统主要通过人脸图像数…