在js中引用图片的写法

  • 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaScript文件,其中可能采用JavaScript代码生成html代码,由于生成的html代码是嵌入在引用该JS文件的页面中,因此,在描述相对路径时,应该使用被引用的文档或素材相对于引用JS文件的页面之间的相对路径。例如,文档“/home/www/a/index.htm”中引用了JS文件“/home/www/a/js/hello.js”,而在该js中生成一段引用素材“/home/www/a/images/1.jpg”的html代码,则在这段代码中,其相对路径应该是“./images/1.jpg”或“images/1.jpg”,而不能是“../images/1.jpg”。例如:$(this).parent().children().css('background','url(images/2015-11-21_091608.png) no-repeat right 8px');还要加上url()。
  • 在CSS文件中书写相对路径:CSS文件是指在页面中引用的外部样式定义文件,该文件通常用于定义页面中各种html标记的显示效果(例如文本的字体名称、字体大小、缩进、边距等),CSS文件中同样可以引用外部的素材或文档(例如设置某个DIV对象的背景图片)。和JS文件不同,浏览器认为CSS文件也是一个独立的文档,因此,在CSS中对素材的引用可以通过计算素材文件和该CSS文件之间的相对路径来实现,而与引用该CSS文件的页面所在的位置无关。例如,文档“/home/www/a/index.htm”中引用了CSS文件“/home/www/a/css/main.css”,而在该CSS中引用了素材“/home/www/a/images/1.jpg”,则在CSS中对于该素材引用的相对路径应该是“../images/1.jpg”,而不能是“./images/1.jpg”或“images/1.jpg”。
  • 因为js是根据引用的页面去定位图片路径的所以最好定义一个全局的jsp引用,这样可以设置相对路径也可以直接在全局jsp定义全局变量path在js里引用
在Vue项目中实现图片手动翻页效果,仅使用CSS,可以利用CSS的`transform`、`transition`以及一些计算属性来模拟滑动效果。这里是一种基本的思路: 1. **创建基础结构**: - 使用HTML创建一个包含多个图片容器(`.carousel-item`),并添加必要的索引类如`.carousel-item-0`, `.carousel-item-1`, 等等,代表当前显示的图片位置。 ```html <div class="carousel"> <div class="carousel-item carousel-item-0" v-for="(image, index) in images" :key="index"> <img :src="image.src" :alt="image.alt"> </div> </div> ``` 2. **样式设置**: - 首先定义一个滚动区域和每个图片容器的基本样式,包括宽度、高度、position和transform初始值。 - 设置`transition`用于平滑切换动画。 ```css .carousel { position: relative; width: 100%; overflow-x: hidden; } .carousel-item { display: flex; justify-content: center; align-items: center; height: 400px; /* 图片高度 */ transition: transform 0.5s ease-in-out; } ``` 3. **JavaScript绑定事件**: - 在Vue组件中,维护一个状态变量`currentPage`表示当前显示的图片索引,初始化为0。 ```javascript export default { data() { return { currentPage: 0, images: [ // 图片数组... ] } }, methods: { nextPage() { this.currentPage = (this.currentPage + 1) % this.images.length; }, previousPage() { this.currentPage = (this.currentPage - 1 + this.images.length) % this.images.length; } }, } ``` 4. **添加滚动交互**: - 当点击下一张或上一张按钮时,更新`currentPage`,然后应用相应的transform,例如向右移动当前页面到下一个位置: ```javascript methods: { ..., prevOrNextSlide(direction) { if (direction === 'next') { this.nextPage(); } else if (direction === 'prev') { this.previousPage(); } const items = document.querySelectorAll('.carousel-item'); const item = items[this.currentPage]; item.style.transform = `translateX(${-(item.clientWidth * direction)})`; } }, // 然后在模板中绑定这些方法给按钮 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值