左侧大图右侧缩略图js

基础概念

左侧大图右侧缩略图的布局是一种常见的网页设计模式，通常用于展示详细图片及其相关的缩略图集合。用户可以通过点击缩略图来切换主图的内容。这种设计可以提高用户体验，使用户能够快速浏览和选择感兴趣的内容。

类型

静态布局：使用HTML和CSS固定布局，适用于图片数量较少且不经常变化的场景。
动态加载：通过JavaScript动态加载图片和缩略图，适用于图片数量较多或需要实时更新的场景。

应用场景

产品展示页：展示多个产品的详细图片和缩略图。
相册浏览：用户可以浏览相册中的大图和缩略图。
新闻图片库：展示新闻事件的详细图片和相关缩略图。

示例代码

以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript实现左侧大图右侧缩略图的布局：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gallery">
        <div class="large-image">
            <img id="mainImage" src="images/image1.jpg" alt="Main Image">
        </div>
        <div class="thumbnails">
            <img src="images/image1.jpg" alt="Thumbnail 1" onclick="changeImage('images/image1.jpg')">
            <img src="images/image2.jpg" alt="Thumbnail 2" onclick="changeImage('images/image2.jpg')">
            <img src="images/image3.jpg" alt="Thumbnail 3" onclick="changeImage('images/image3.jpg')">
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
}

.gallery {
    display: flex;
    justify-content: space-between;
    margin: 20px;
}

.large-image img {
    width: 70%;
    height: auto;
}

.thumbnails img {
    width: 100px;
    height: 100px;
    margin: 5px;
    cursor: pointer;
}

JavaScript (script.js)

function changeImage(imageSrc) {
    document.getElementById('mainImage').src = imageSrc;
}

可能遇到的问题及解决方法

问题1：图片加载缓慢

原因：图片文件过大或网络连接不佳。 解决方法：

压缩图片文件大小。
使用图片懒加载技术，只在图片进入视口时加载。

问题2：缩略图点击无反应

原因：JavaScript函数未正确绑定或存在语法错误。 解决方法：

检查HTML中的onclick事件是否正确绑定到JavaScript函数。
使用浏览器的开发者工具检查控制台是否有错误信息。

问题3：布局在不同设备上显示不一致

原因：CSS样式未适配不同屏幕尺寸。 解决方法：

使用响应式设计，添加媒体查询以适配不同屏幕尺寸。
使用CSS Flexbox或Grid布局确保元素在不同设备上正确排列。

通过以上方法，可以有效解决左侧大图右侧缩略图布局中常见的问题，提升用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端特效开发 | 点击查看大图相册效果

然后通过点击相应的缩略图，左侧的大图区域即可切换出与缩略图一致的大图展示效果，以获取对应的图片照看状态。通过查看效果，对于它的实现我们又该如何操作呢？一起来分析下吧~~~ 2....实现的原理分析 2.1 结构与样式搭建结构的搭建看起来很简单，总共分为左侧大图展示与右侧缩略图展示两个区域。但是实际书写时配合上一个合适的背景、阴影之后，用到的结构就相对多了一些层级。...因为后面为了实现预载的形式，所以在使用图片时存储了两张，一张用来展示缩略图，一张用来获取其地址，然后再切换时把地址参数传给左侧的大图区域。...2.2 功能逻辑分析首先让左侧的大图区域展示一个初始化图片，即直接传递一张图片来使用；然后借助JQ的hover为右侧的缩略图添加鼠标悬停时的动画提示状态；最后实现点击图片切换与大图展示的功能，同时对图片的展示做加载处理...此时只需要获取到在缩略图结构中存放的第二张图片的地址，然后调用图片载入函数loadPhoto()，对其传入相应的图片地址，为左侧的大图区域设置背景图即可。

2.9K10 0

本站同款宁静致远(Quietlee)自媒体博客主题模板，夜间模式及强大的SEO效果-ZBlog主题

，优化效果显著（SEO规范均按照搜索引擎白皮书制作）；文章缩略图自定义大图模式，还有三图、单图和无图模式；文章标题附带推荐（编辑文章开启推荐），热文（浏览数超过1000），最新（发布时间小时24小时...文章功能展示：推荐：标题左侧显示推荐字样，如果大于1000显示热门，如果发布时间小于24小时显示最新，如果开启推荐，则优先显示。...大图：开启之后文章列表显示大图模块（文章图片超过三张的时候如果开启大图则优先显示此样式，如果没有图片开启大图则随机分配一张图片，随机图片路径“/zb_users/theme/quietslee/include...-- 新增缩略图裁剪功能，功能设置，裁剪质量，款和高度，建议：质量90，W：210，H：159 PS：缩略图裁剪功能仅仅适用分类列表的单图模式，不适用大图和多图和其他模式。...首页文章列表导航标签设置：此处设置文章列表导航标签，文章列表导航标签对应图1（为空则不显示），滚动字母对应图2。注意：右侧开关针对右侧滚动字幕。

3.2K2 0

Z-BlogPHP开运锦鲤前来报道（更新说明及操作教程，必看文章）

V、顶部导航背景图固定模式。更新说明（2020年/05/12）： V、优化评论js代码。 V、优化自适应夜间模式样式表。...更新说明（2019年/9月18）： V、首页右侧新增图文开关，轮播和右侧图文分离开关，可以在关闭右侧图文信息的情况下保留轮播（注：如果关闭右侧图文，请更换轮播图片，宽约：1200，高度自定） V、商品页文章信息转移至左侧图片下方...更新公告模块（原微语模式）效果如下：设置方式：左侧菜单，页面管理，新建页面，标题和正文随意，然后设置底部“别名”（例如：notice）然后右侧提交。...轮播设置：默认情况下：轮播的图片尺寸为：831*380（像素）右侧对应的是四篇文章，如果你开启了百度的信息流广告，那么文章就得减少一篇，如果右侧文章想设置其他数量，那么左侧的轮播高度也要随之增减，看具体情况...第二个：侧栏，先说下侧栏的调用顺序：左侧菜单，模块管理，找到主题和插件创建的模块，然后把你想展示的模块拖拽到右侧。

3.4K3 0

个人主题建站首选微博秀模板，仿新浪微博官网

V、删除360搜索出图代码。更新日志：2020/08/10 V、优化搜索模板代码，删除一处无用JS。 V、精简php和删除不规范代码。...主题更新日志：（2020/04/19）优化分类列表文章缩略图的显示方案。优化移动端叠加评论时左侧的间距。优化搜索页文章描述调用方式。...主题设置介绍：按照我的习惯设置步骤走，首页我可能会先设置侧栏信息，左侧的导航调用的模块是，导航栏（模块管理，导航栏），设置完导航在设置右侧的侧栏信息，标注下各模板对应的侧栏模块：首页模板（对应...）模块管理---右侧，默认侧栏；分类列表页（对应）模块管理---右侧，侧栏2；文章页模板（对应）模块管理---右侧，侧栏3；具体展示哪些模块自己在系统模块和主题自带模块，拖拽到对应侧栏即可。...卡片背景图（对应）分类列表右侧图片，看图：这个图片，你可以直接复制新浪微博的地址，然后粘贴在背景图接口，保存就行了。

3.5K2 0

zblog明信片主题类型模板全新绽放，R角、透明、森系您想要的我都有

-- 优化模板首页轮播代码，减少无用js加载，加速网页速度。 -- 优化缩略图显示优化方案。 V 2.3.9（22/12/07） -- 修复某些情况下因插件不兼容导致评论框间距过大的问题。...-- 优化主题核心js代码，修改原域名链接。 -- 优化部分用户中心代码兼容问题。 -- 修复主题设置右侧设置说明地址错误的问题。...2021/05/22 -- 修复开启大图模式下偶尔无法打开页面的BUG。 -- 修改侧栏评论样式代码。 -- 修复侧栏随机文章样式细节代码。 -- 优化和适配夜间模式代码。...-- 优化侧栏左侧背景图底部渐显代码。 -- 新增搜索框下拉显示自定义文章功能，主题设置--全局设置--设置搜索下拉文章or开启。 -- 适配相关页面夜间模式代码。...但是也有缺点，就是在搜索快照下显示占位图片，不显示文章缩略图，因为快照下不会加载js，所以只能显示占位图片。

1.9K2 0

Z-BlogPHP开运锦鲤前来报道（更新说明及操作教程，必看文章）

2.8K4 0

李洋个人博客《mxlee》zblog主题-梦想家（精品推荐）

2020/05/26更新： V、优化文章列表缩略图php代码。 2020/05/16更新： V、优化搜索页模板。 2020/05/11更新： V、优化评论js代码优化ajax预加载。...--.精简js文件及css样式表代码。 --.优化侧栏智能跟随，当网页下拉时自动跟随左侧文章列表对齐，无需手动对齐。 --.新增网站底部右侧的图标优化，可自定义一个图标接口。...--.修改缩略图裁剪方案。 --.修复开启 “作者-佳句赏析” 无效的BUG。 --.修复随机图文展示缩略图优先显示自定义的功能。 --.修复文章单页没有右侧评论按钮功能的BUG。...--.其他方面就是精简优化css和js，现在整体效果非常好。 --.修复开启自定义缩略图相关文章不获取自定义图片的BUG ---- --.优化瀑布流模板展示效果。...--.自带404模板页（无需设置）特别说明：热门标签数量，这个是为了首页左侧模块和右侧侧栏对齐使用的，因为底部有横向轮播，如果左侧内容过多可以设置标签展示的数量，直到两侧对齐。

2.1K2 0

begin主题使用说明（详解教程）

5、文章中无图显示随机缩略图缩略图比例：大于等于280×210px，因本主题为响应式设计，页面会随着屏幕大小的改变而缩放，所以缩略图比例必须相同，否则有些模板和模块会显示错位。...下面左侧是正常页面中输入的文字（可用于企业简介），右侧调用的是8篇最新文章。...begin主题使用说明（详解教程）页脚小工具左侧是自定义菜单小工具，需单独新建一个菜单，并在“自定义菜单”小工具中调用这个新建的菜单，不能有二级菜单。右侧是文本小工具，可添加任意HTML代码。...最新文章，调用指定分类的最新文章，并带缩略图图热门文章，调用一定时间段内点击最多的文章，必须安装wp-postview插件，并有计数统计。...至于JS文件主题本身已经过压缩，不要听信一些所谓优化建议，将JS文件放在一个文件中，会造成部分功能不可用。

4.8K4 0

织梦dede列表调用图集的第一张图片大图原图地址（非缩略图）

dede （55）我们在使用dede图片集的时候经常会碰到列表页或者内容页要调用一张图片而并非缩略图，那么碰到这样的问题怎么办呢？...今天就给大家分享一个解决办法：步骤一：修改include/extend.func.PHP 添加如下代码： //取第一张图地址 function firstimg(str_pic) { str_sub...=substr(str_pic,0,-7).”.jpg”;//删除缩略图字符串最后七位，然后再补上后缀.jpg return str_sub; } 步骤二：直接在dede模板里面写调用标签然后在模板里循环调用

1.4K1 0

Z-blogPHP《小清新》至简至美个人博客主题模板，自适应加SEO优化

- 优化删除侧栏标题右侧背景图。 - 优化SEO规范，减少部分模板页出现重复的关键词及描述等问题。 2020/08/05 - 优化首页轮播，显示文字标题。...2020/05/25 V、优化网站缩略图php代码。 V、优化导航栏之间的间距。 V、优化搜索结果，在没有内容的情况下，友好提示！ 2020/05/18 V、优化顶部背景图视觉差特效。...2020/04/09 V、修复分类列表文章缩略图太小显示不全的问题。 V、优化列表分类之间间距，适配移动端显示效果。 V、修复用户模板页无法打开的BUG。 V、增加其他模板顶部背景图接口。...2020/03/07 1.优化侧栏热门模块，模块管理-热门文章，拖拽到右侧侧栏，随意编辑文章，提交生成缓存文件即可。 2.优化网友反馈问题。 3.精简主题样式表和js文件。...4.修改主题模板缩略图。 5.优化更新首页轮播图js代码，修复部分情况下360浏览器单击轮播不跳转的BUG。 6.修复分类列表作者头像加V错乱的bug。

3.3K2 0

zblogPHP万能型主题模板希望（Hopelee）全新绽放，独具热爱，自成一派

-- 删除主题缩略图裁剪功能（文章基数大引起CPU飙升，所以删除）。 V 1.5.6（23/02/20） -- 修复文章模板底部相关推荐文章调用出错的问题。...-- 优化模板首页轮播代码，减少无用js加载，加速网页速度。 -- 优化缩略图显示优化方案。...-- 修复缩略图接口策略，优化文章无图但自定义缩略图设置图片依然不显示的BUG。 -- 优化移动端顶部搜索框代码及样式。...-- 修复关闭UE编辑器后引起js错误提示。 -- 优化文章编辑时右侧侧栏跟随效果，取消官方跟随代码。 1.3.3（22/1/10） -- 临时修复部分分辨率下导航栏错位问题。...更新日志：2021/08/20 -- 优化网页缩略图代码。 -- 新增文章缩略图多图开关，文章即使超过三张图片也默认显示一张，需要开启三张则单独开启功能。

2.2K3 0

超好看的30款网站侧边栏设计

侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。...但一般来讲，由于视觉习惯和用户行为，侧边栏位于左侧更容易第一时间吸引用户注意力，因而也能很高效地给用户提供导航；而右侧的侧边栏则常被看做是二级导航，因而可以丰富网站的结构层次。...Grace chuang Grace chuang是一个作品集单页网站，该网站布局分为三大部分，左侧为带有logo和社交按钮的侧边栏，中心是网站所有者的照片展示，右侧是自我介绍。 ? 4....Quinntonharris Quinntonharris是一个非常美观的个人网站，以大图和文字讲述网站主人的生活事迹，侧边栏导航使用圆点，会有垂直翻页的幻灯片的感觉。...Deanie chen Deanie chen的侧边栏具有留白、简单、素净的特点，和右侧轮播展示的色彩丰富的大图形成了鲜明对比。 ? 13.

12.7K1 0

zblog企业展示型主题模板赢天下（Winlee）助力小微企业成长

-- 优化模板首页轮播代码，减少无用js加载，加速网页速度。 -- 优化缩略图显示优化方案。 V 2.7（22/12/22） -- 修复某些情况下因插件不兼容导致评论框间距过大的问题。...-- 修复缩略图接口策略，优化文章无图但自定义缩略图设置图片依然不显示的BUG。 -- 优化移动端顶部搜索框代码及样式。 -- 优化奥森图标代码，取缔奥森CDN链接，采用本地链接方案。...-- 优化文章页图片灯箱插件，改用更为精简的js代码，提高网站效率。 -- 优化页面头部整体代码，减少无用js和css样式代码。...-- 优化评论js函数代码。 -- 重写留言评论翻页代码。...-- 优化主题后台幻灯片预览图显示效果。 -- 优化文章列表缩略图在非4:3比例显示被拉伸的问题。 2021/10/29 -- 修复后台授权验证代码，减少非大陆主机引起的无法调用授权接口的代码。

1.8K4 0

ZBP首款纯网址导航主题（雕刻时光）小众导航模式+常规导航模式，给你想要的!

V、优化评论js。 V、优化文章缩略图代码。更新说明：（2020/05/15） V、修复文章页评论翻页无效的BUG。 V、精简代码，提升网站加载速度。...更新说明：（2020/05/08） V、优化评论JS代码，删除旧版和不兼容的代码。更新说明：（2020/04/16） V、增加文章页面收录提交地址接口，自行设置提交的网址。...V、左侧导航内容增加开关。 V、优化自适应显示效果。...360搜索出图，开不开随意，这个是前提不是必要，即使开启了，也不一定会有结果出图，所以开不开自己决定。自定义缩略图建议开启，开启之后编辑文章的时候，右侧有缩略图，这个针对文章资讯有用。...小众模式预览图：

1.7K1 0

从0到1：AI微信红包开发全攻略，小白也能轻松上手！

简单来说，我们需要一张精美的红包封面图，它会出现在发红包、消息气泡、拆红包、详情页等四个地方。而且尺寸也有要求，是957×1278像素。看起来有点复杂，不过别担心，AI会帮我们搞定！...使用Vue3+TS+TailwindCSS 开发一个网站，服务器会返回一张图片，用户可以预览这张图的红包封面，红包消息气泡、拆红包页、红包详情页等于是，我决定自己动手，丰衣足食！...并且用Python爬取了微信官方的红包图，生成了一个超酷的红包封面墙！4. 提示词操作这个页面我参考了淘宝商品页的布局，还是在v0中实现。...使用Vue3+TailwindCSS 实现，参考图示左侧为展示区域分为两部分：红包封面，气泡，挂件等的缩略图点击缩略图，切换大图展示区域，默认为第一个缩略图展示右侧为操作区域：提示词输入框，气泡挂件预览开关...Coze红包封面工作流为了实现文生图，我使用了Coze的工作流，效果非常不错。可以自定义系统提示词和用户提示词，只需要输入提示词，就能生成独一无二的红包封面！

1471 0

15 HarmonyOS NEXT UVList组件开发指南(二)

Componentstruct UVListItem { // 列表项属性 private item: ListItemProps ={} as ListItemProps; // 是否显示缩略图...} }) }}2.2 组件属性解析属性类型说明itemListItemProps列表项数据，包含标题、描述、图标等showThumbnailboolean是否显示缩略图...：左侧图标区域：显示图标或缩略图中间内容区域：显示标题和描述文本右侧区域：显示右侧文本和导航箭头3....作为根容器，包含标题和列表内容：Column() { // 标题（如果有） // 列表内容}.width('100%')4.2 列表项布局UVListItem组件使用Row作为根容器，包含左侧图标...、中间内容和右侧区域：Row() { // 左侧图标区域 // 中间内容区域 // 右侧区域}.width('100%').padding({ left: 16, right: 16,

370 0

15 HarmonyOS NEXT UVList组件开发指南(二)

Component struct UVListItem { // 列表项属性 private item: ListItemProps ={} as ListItemProps; // 是否显示缩略图...; build() { Row() { // 左侧图标区域 if (this.showIcon && this.item.icon...}) } } 2.2 组件属性解析属性类型说明 item ListItemProps 列表项数据，包含标题、描述、图标等 showThumbnail boolean 是否显示缩略图...UVListItem组件的布局分为三个主要区域：左侧图标区域：显示图标或缩略图中间内容区域：显示标题和描述文本右侧区域：显示右侧文本和导航箭头 3....、中间内容和右侧区域： Row() { // 左侧图标区域 // 中间内容区域 // 右侧区域 } .width('100%') .padding({ left: 16, right

681 0

zblog主题模板，水墨年华(filmslee)

主题自带部分接口，可以在主题后台实现修改背景图，自带SEO优化功能，如果您开启了SEO插件，那么请在后台关闭SEO设置，否则代码冲突会导致网站没有标题。...更新日志： V 1.7（22/05/03） -- 修复缩略图接口无效的BUG。 -- 修复导航栏高亮无效的问题，兼容链接管理插件。 -- 优化文章缩略图部分尺寸被拉伸的问题。...2020/10/30 -- 优化文章分类列表左侧角标代码。 2020/07/15 -- 导航新增搜索功能。 -- 优化移动端顶部导航菜单出错的问题。...2020/06/22 --优化缩略图显示方案。很简单的主题，无需过多的设置，右侧还自带了客户QQ和微信展示，需要的话在主题设置修改。

7501 0

ZBP旗舰主题博览《Expolee》，新年新气象我的风格就是独“鼠”一帜！

自定义样式和js接口，满足不同要求的你。自带丰富广告展示接口。主题模块支持开关，是否开启随您心意。主题视频教程制作中，请稍后。。。...-- 优化侧栏标题右侧角标。更新详情：09/23 -- 优化文章的时间格式代码。更新详情：09/09 -- 修复缩略图在百度快照下不显示的问题。 -- 优化文章打赏代码及接口。...更新详情：（06/26） -- 修复顶部登录开关无效的问题； -- 新增顶部左侧导航开关。更新详情：（06/11）优化百度分享代码，删除原分享接口，更新之后在功能设置，开启分享就行了。...更新详情：（05/23）优化文章列表缩略图PHP代码。更新详情：（05/14）优化评论js代码。优化冗余代码，提升网站打开速度！更新详情：（05/03）优化夜间模式兼容。...使用教程（以网站地图为例），页面管理，新建文章，自拟题目和文章内容，然后右侧，模板选择“sitemap”然后点击提交，刷新，前台效果图：其他页面请选择对应模板，links友联模板、tags标签聚合模板。

1.4K2 0

AI编码工具Bolt：是神器还是鸡肋？

我想要一列缩略图，在右侧显示以前的条目。我假设我的导语（第一段）将用作带有缩略图图像的文本。每篇文章都将有一张“英雄”图片。这些都很标准。...一旦我选择了 Astro，我们就会在左侧得到一个聊天框，在右侧得到代码和预览。Astro 开始设置： Bolt 从未告诉我我将在哪里工作——在云端还是本地？...为了看看我们现在有什么，我点击了大的部署按钮，这在聊天框中得到了中继。这是与 Netlify 合作完成的，Netlify 为此与 Bolt 建立了合作伙伴关系。...通过左侧窗格浏览文件，我遇到了 src/pages/blog/index.astro 中博客缩略图的描述：当我开始编辑时，页面在我输入时不断向上滚动。...它做到了，但也颠倒了我对位置的其他更改并删除了标题：这里的结论不是与 LLM 进行细粒度的语言战斗，而是让 LLM 进行大的更改，同时稍后修复细节。我也在与滚动错误作斗争。

730 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

左侧大图右侧缩略图js

基础概念

相关优势

类型

应用场景

示例代码

HTML

CSS (styles.css)

JavaScript (script.js)

可能遇到的问题及解决方法

问题1：图片加载缓慢

问题2：缩略图点击无反应

问题3：布局在不同设备上显示不一致

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐