HTML 图片浏览效果如何修改。

浏览效果:http://jsrun.net/M6vKp/edit

学习作业,代码与效果可直接点击上面的链接,我根据找到的插件修改了自己的其中模块,点击图片会出现弹窗,弹窗会获取当前页面的图片,然后可以进行切换和全屏显示。

企业微信截图_15925476968073.png

因为只用写前端,不用数据库,所以我在照片文件夹下另建了一个文件夹,点击图片后出现弹窗,弹窗获取这个文件夹里面的图片,而不是获取页面上所有的图片,请问大佬们,该如何修改成获取这个本地文件夹里面的图片?

阅读 2k
2 个回答
// 先分析引用路径
// 从这里看本地路径是:../photo/image/*.png
<script src="../js/pic_view.js"></script>

// 然后分析函数引用
$.pic_view({
    images: imagesArr,                  //需要查看的图片,数据类型为数组
    initImageIndex: this_.index() + 1,  //初始查看第几张图片,默认1
    scrollSwitch: true                  //是否使用鼠标滚轮切换图片,默认false
});
// 很明显你需要的是 imagesArr,逆推数据源是 图片的 src 属性 = 图片路径

建议整个全局的常数写图片路径,然后替换 imagesArr,可以写多一点,然后 .slice(0, imagesArr.length)

你现在是通过jq查询到所有img标签的src然后push进imagesArr中,如果你要展示本地的图片列表,你自己写死imagesArr然后数组每项对应本地图片的相对路径即可。如果要动态获取可能需要用到node中的fs模块进行文件读取,fs.readFile(filename,\[options\],callback)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题