js定时换图片（图片路径可变）

背景

要做一个书翻开的效果，书是可以反复点击查看的

一开始做的动图，但是动图反复显示隐藏并不会按照我想的那样，所以只能切图后用js换图片了

前8张封面是不一样的，9–13张都是一样的，所以根据点击的是哪个按钮来决定显示那一套图片

需要的标签

点击出现书的按钮，这里只是演示作用所以写一个就行，是class为book_back_point_words的div
需要更换图片路径的标签，开始隐藏，点击按钮后显示，是class为book_flipchart的img

js代码

var flipchart_arr=new Array();//翻书图片数组
var flip_index;//翻书图片的index$('.book_back_point_words').click(function() {book_start_anim('words');
})function book_start_anim(book_name) {flip_index  = 0;$('.book_flipchart').attr({'src': ./img/book/fanshu/' + book_name + '1.png'});flipchart_arr[0]='./img/book/fanshu/' + book_name + '1.png';flipchart_arr[1]=./img/book/fanshu/' + book_name + '2.png';flipchart_arr[2]='./img/book/fanshu/' + book_name + '3.png';flipchart_arr[3]='./img/book/fanshu/' + book_name + '4.png';flipchart_arr[4]='./img/book/fanshu/' + book_name + '5.png';flipchart_arr[5]='./img/book/fanshu/' + book_name + '6.png';flipchart_arr[6]='./img/book/fanshu/' + book_name + '7.png';flipchart_arr[7]='./img/book/fanshu/' + book_name + '8.png';flipchart_arr[8]='./img/book/fanshu/flipchart9.png';flipchart_arr[9]='./img/book/fanshu/flipchart10.png';flipchart_arr[10]='./img/book/fanshu/flipchart11.png';flipchart_arr[11]='./img/book/fanshu/flipchart12.png';flipchart_arr[12]='./img/book/fanshu/flipchart13.png';$('.book_flipchart').show();let replace_flipchart = setInterval(function(){var obj=document.getElementsByClassName("book_flipchart")[0];if(flip_index == flipchart_arr.length-1){clearInterval(replace_flipchart);}else{flip_index +=1;}obj.src=flipchart_arr[flip_index];},60)
}

js定时换图片（图片路径可变）相关推荐

JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...
js脚本替换拼接图片路径
#js脚本,拼接图片路径 ##替换拼接页面中图片路径: -$(function () { $('img').each(function () { var imgpath = $(this).attr( ...
js实现在文本框输入图片的路径，在下方动态显示图片
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...
php批量修改图片地址,织梦网站内容页图片绝对路径设置及批量替换方法
今天深山就跟大家分享一下织梦如何设置绝对路径,分为三种类型说:栏目和文章的觉路径.新上传图片绝对路径.已经上传图片相对路径替换绝对路径,缩略图绝对路径替换请看<织梦缩略图相对路径批量替换绝对路径 ...
以Jar形式为Web项目提供资源文件（JS、CSS与图片）
一.背景二.分析 1.把我需要的JS.CSS与图片等资源copy到Web工程中. 2.通过程序采用流的方式读取Jar中的资源流再输出到页面流. 三.分析结果四.核心代码开发(Jar端) 1.org ...
Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
html+js将文本和图片保存（下载）到本地技术
html+js将文本和图片保存(下载)到本地技术我在博文https://blog.csdn.net/cnds123/article/details/120469779介绍了用html+js读取本地文 ...
html验证码图片,js+h5 canvas实现图片验证码
本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一.使用技术原生js技术+html5 canvas画图利用Math.random()函数随 ...

js定时换图片（图片路径可变）

背景

需要的标签

js代码

js定时换图片（图片路径可变）相关推荐

最新文章

热门文章