带箭头的焦点图效果_带指针和缩略图的横向焦点图代码-优快云博客

这段代码展示了如何使用jQuery实现一个图片预览功能，包括一个带有缩略图导航的滑动效果。当点击缩略图时，主预览区域会平滑滚动到相应图片的位置。同时，提供了背景图片、箭头和缩略图样式等细节设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址

HTML

Leonardo Maia

skillicorn

theenergycell

Fred Maya

CSS代码 #preview_wrap { margin: 0 auto; padding: 22px; width: 550px; height: 400px; background: url("images/bg_preview.gif") top left no-repeat; } #preview_outer { overflow: hidden; width: 550px; height: 400px; position: relative; } #preview_inner { text-align: left; height: 100%; position: relative; } #preview_inner div { float: left; width: 550px; height: 400px; position: relative; } #preview_inner div a { position: absolute; bottom: 0; left: 0; display: block; width: 100%; text-indent: 20px; padding: 20px 0; color: #fff; background: url(images/bg_trans.png); text-decoration: none; font-size: 18px; } #thumbs { padding-top: 30px; position: relative; width: 750px; text-align: center; } #thumbs span { padding: 12px; width: 80px; height: 80px; cursor: pointer; background: url("images/bg_thumb.gif") top left no-repeat; display: inline-block; } #arrow { position: absolute; top: -13px; background: url("images/bg_arrow.gif") top center no-repeat; width: 104px; height: 39px; display: none; }jQuery $(document).ready(function () { // Save the jQuery objects for later use. var outer = $("#preview_outer"); var arrow = $("#arrow"); var thumbs = $("#thumbs span"); var preview_pos; var preview_els = $("#preview_inner div"); var image_width = preview_els.eq(0).width(); // Get width of imaages // Hook up the click event thumbs.click(function () { // Get position of current image preview_pos = preview_els.eq(thumbs.index(this)).position(); // Animate them! outer.stop().animate({ "scrollLeft": preview_pos.left }, 500); arrow.stop().animate({ "left": $(this).position().left }, 500); }); // Reset positions on load arrow.css({ "left": thumbs.eq(0).position().left }).show(); outer.animate({ "scrollLeft": 0 }, 0); // Set initial width $("#preview_inner").css("width", preview_els.length * image_width); });

dd: