1. Python技术站首页
  2. jquery

非常漂亮的相册集 使用jquery制作相册集

• jquery

首先我们需要了解相册集的一些基本概念和实现原理。

什么是相册集？

相册集是一种展示图片集合的页面效果，它一般包含缩略图列表、图片预览、图片标题和描述等内容。相册集可以通过点击缩略图来切换显示不同的图片，并支持左右滑动切换图片。相册集通常使用轮播插件或者自定义实现来制作。

使用jquery制作相册集具体步骤：

1.准备工作

1.1 引入jquery库

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1.2 编写HTML结构

首先需要编写相册集的HTML结构，包括缩略图列表、图片预览区域、图片标题和描述等内容。

<div class="album">
  <div class="thumbs">
    <ul>
      <li><img src="images/1.jpg" alt=""></li>
      <li><img src="images/2.jpg" alt=""></li>
      <li><img src="images/3.jpg" alt=""></li>
      <li><img src="images/4.jpg" alt=""></li>
    </ul>
  </div>
  <div class="preview">
    <div class="slide"><img src="images/1.jpg" alt=""></div>
    <div class="slide"><img src="images/2.jpg" alt=""></div>
    <div class="slide"><img src="images/3.jpg" alt=""></div>
    <div class="slide"><img src="images/4.jpg" alt=""></div>
    <a class="prev"></a>
    <a class="next"></a>
  </div>
  <div class="info"></div>
</div>

2.实现功能

2.1 点击缩略图切换图片

$(".thumbs ul li").click(function() {
  var index = $(this).index();
  $(this).addClass("active").siblings().removeClass("active");
  $(".preview .slide").eq(index).show().siblings().hide();
})

2.2 左右滑动切换图片

var curIndex = 0;
var total = $('ul', '.thumbs').find("img").length;
$(".prev").click(function() {
  curIndex--;
  if (curIndex < 0) {
    curIndex = total - 1;
  }
  $('ul', '.thumbs li').eq(curIndex).trigger('click');
})
$(".next").click(function() {
  curIndex++;
  if (curIndex > total - 1) {
    curIndex = 0;
  }
  $('ul', '.thumbs li').eq(curIndex).trigger('click');
})

2.3 显示图片标题和描述

$(".thumbs ul li").click(function() {
  var index = $(this).index();
  $(this).addClass("active").siblings().removeClass("active");
  $(".preview .slide").eq(index).show().siblings().hide();
  var title = $(this).find("img").attr("alt");
  var desc = $(this).find("img").attr("data-desc");
  $(".info").html("<h3>" + title + "</h3><p>" + desc + "</p>");
})

3.美化样式

最后对CSS样式进行美化。

.album {
  margin: 0 auto;
  width: 80%;
}

.thumbs {
  float: left;
  width: 20%;
  height: 500px;
  overflow-y: scroll;
}

.thumbs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.thumbs li {
  margin-bottom: 10px;
  cursor: pointer;
}

.thumbs li img {
  width: 100%;
  height: auto;
}

.preview {
  float: left;
  width: 60%;
  height: 500px;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background-color: rgba(0, 0, 0, .5);
}

.prev {
  left: 0;
  border-radius: 4px 0 0 4px;
}

.next {
  right: 0;
  border-radius: 0 4px 4px 0;
}

.info {
  float: left;
  width: 20%;
  height: 500px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.info h3 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
}

.info p {
  margin-bottom: 10px;
}

示例1：非常漂亮的相册集

演示效果：https://codepen.io/ziweihuang/pen/WNrRVwO

代码解析：这是一个非常漂亮的相册集，它使用了CSS3动画和渐变效果，以及一些jQuery代码实现了图片的切换、滑动和标题描述的显示效果。

示例2：使用插件制作相册集

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>相册集</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/photoswipe/4.1.3/photoswipe.css">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.css">
  <style>
    .gallery-item {
      width: 25%;
      float: left;
      margin-bottom: 10px;
      padding: 0 5px;
    }
    .gallery-item img {
      width: 100%;
      height: auto;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 相册集列表 -->
  <div class="gallery">

    <div class="gallery-item">
      <img src="images/1.jpg" alt="">
    </div>
    <div class="gallery-item">
      <img src="images/2.jpg" alt="">
    </div>
    <div class="gallery-item">
      <img src="images/3.jpg" alt="">
    </div>
    <div class="gallery-item">
      <img src="images/4.jpg" alt="">
    </div>

  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
  <script>
    $(document).ready(function() {
      var pswpElement = document.querySelectorAll('.pswp')[0];
      var items = [
          {
              src: 'images/1.jpg',
              w: 400,
              h: 300
          },
          {
              src: 'images/2.jpg',
              w: 800,
              h: 600
          },
          {
              src: 'images/3.jpg',
              w: 1600,
              h: 1200
          }
      ];

      $(".gallery-item").click(function() {
        var index = $(this).index();
        var options = {
            index: index,
            bgOpacity: 0.7,
            showHideOpacity: true
        };
        var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
      })
    })
  </script>
  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>

    </div>
  </div>
</body>
</html>

代码解析：该示例使用的是PhotoSwipe插件，实现了图片的缩放、旋转、滑动和标题描述的显示效果。

结语

无论是自定义制作相册集还是使用插件进行制作，相册集都是一种很好的图片展示效果，可以为网站提供更为丰富的视觉体验。本攻略提供了相册集的制作流程和代码示例，希望对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：非常漂亮的相册集 使用jquery制作相册集 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • jQuery event.which属性

    jQuery event.which属性返回触发事件的按键或鼠标操作的数字代码。该属性通常用于确定用户按下了哪个键或执行了哪个鼠标操作，以便在事件处理程序中采取适当的行动。 以下是jQuery event.which属性的详细攻略： 语法 event.which 参数 无 示例1：确定按键代码 以下示例演示了如何使用jQuery event.which属性确…

    jquery 2023年5月9日
    00

  • Openlayers实现测量功能

    为了实现Openlayers中的测量功能，我们需要借助第三方库——Openlayers-Geometries measure，以下是实现步骤。 步骤一：下载并引入Openlayers-Geometries measure 可以通过以下两种方式引入Openlayers-Geometries measure库： 方式一：通过npm安装 在项目的根目录下执行以下命…

    jquery 2023年5月27日
    00

  • 超简单的jquery的AJAX用法

    让我仔细为你讲解 “超简单的jquery的AJAX用法” 的完整攻略。 什么是 AJAX AJAX（Asynchronous JavaScript and XML）是指一种创建交互式、快速响应 Web 应用程序的网页开发技术。使用 AJAX 技术，你可以通过异步的方式发出 HTTP 请求，而无需页面刷新，从而提高 Web 应用程序的性能和用户体验。 jQue…

    jquery 2023年5月27日
    00

  • jQWidgets jqxScheduler enableHover属性

    以下是关于 jQWidgets jqxScheduler 组件中 enableHover 属性的详细攻略。 jQWidgets jqxScheduler enableHover 属性 jQWidgets jqx 组件的 enableHover 属性用于启用或用鼠标悬停事件。 语法 $(‘#scheduler’).jqxScheduler({ enableHo…

    jquery 2023年5月12日
    00

  • Jquery Ajax请求方法小结(值得收藏)

    Jquery Ajax请求方法小结(值得收藏) 前言 在前端开发中，我们经常会涉及到数据的异步请求，而jquery中提供了丰富的ajax方法来处理这种请求。本文将对jquery中的ajax请求方法进行总结和介绍，帮助大家掌握相关技能，提高开发效率。 $.ajax()方法 $.ajax()方法是jquery中最常用的ajax方法，它能够处理各种类型的请求方式。…

    jquery 2023年5月27日
    00

  • jQuery UI Spinner widget()方法

    以下是关于 jQuery UI Spinner widget() 方法的详细攻略： jQuery UI Spinner widget() 方法 widget() 方法返回 Spinner 的 jQuery 对象。您可以使用此方法来访问 Spinner 的方法和选项。 语法“`javascript $(selector).spinner(“widget”);…

    jquery 2023年5月11日
    00

  • jQWidgets jqxListBox unselectIndex()方法

    jQWidgets jqxListBox unselectIndex()方法详解 jQWidgets是一个基于jQuery的UI组件库，提供了丰富UI组件工具包。ListBox是其中之一。本文将详细介绍jqxListBox的unselectIndex()方法，包括定义、语法和示例。 unselectIndex()方法的定义 jqxListBox的unsele…

    jquery 2023年5月10日
    00

  • jQWidgets jqxHeatMap yAxis 属性

    jqxHeatMap 是 jQWidgets 提供的一种热力图控件，用于在 Web 应用程序中创建热力图。yAxis 属性用于设置 jqxHeatMap 控件的 Y 轴。以下是jqxHeatMap的yAxis` 属性的详细说明： 属性 yAxis 属性用于设置 jqxHeatMap 控件的 Y 轴。该属性是一个对象，包含了多个子属性，用于设置 Y 轴的各种属…

    jquery 2023年5月10日
    00
合作推广
合作推广
分享本页
返回顶部