用html实现一个文章图片缩略展示

2024-03-31 11:20

本文主要是介绍用html实现一个文章图片缩略展示,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文章图片缩略展示</title><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="carousel"><!-- 箭头绘制 --><div class="carousel_nav"><span id="moveLeft" class="carousel_arrow"><svg class="carousel_icon" width="24" height="24" viewbox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></span><span id="moveRight" class="carousel_arrow"><svg class="carousel_icon" width="24" height="24" viewbox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></span></div><!-- 图片文章概述 --><div class="carousel-item carousel-item--1"><div class="carousel-item_image"></div><div class="carousel-item_info"><div class="carousel-item_cantainer"><h2 class="carousel-item_subtitle">Dixie National Forest</h2><h1 class="carousel-item_title">迪克西国家森林公园</h1><p class="carousel-item_description">位于犹他州的南部,是从锡安公园走Highway89公路前往布莱斯峡谷的必经之路,占地将近200万英亩,横跨犹他州南部约170英里以及更广泛的地区,是大盆地和科罗拉多河之间的鸿沟。</p><a href="#" class="carousel-item_btn">阅读文章</a></div></div></div><div class="carousel-item carousel-item--2"><div class="carousel-item_image"></div><div class="carousel-item_info"><div class="carousel-item_container"><h2 class="carousel-item_subtitle">Bernina Alps</h2><h1 class="carousel-item_title">伯尔尼纳山</h1><p class="carousel-item_description">瑞士东部沿著意大利边境伸展的雷蒂亚阿尔卑斯山脉(Rhaetian Alps)的一部分,景色秀丽,伯尔尼纳峰高达4,049公尺(13,284尺)。</p><a href="#" class="carousel-item_btn">阅读文章</a></div></div></div><div class="carousel-item carousel-item--3"><div class="carousel-item_image"></div><div class="carousel-item_info"><div class="carousel-item_container"><h2 class="carousel-item_subtitle">Lappland</h2><h1 class="carousel-item_title">拉普兰</h1><p class="carousel-item_description">拉普兰地处芬兰最北部。这是一片充满魔幻魅力的北极地带,各种反差十分强烈。事实上,拉普兰地区的主要魅力之一就是强烈的反差:从24小时日照不断的温暖夏季,到北极光辉映下的黑暗冬日。</p><a href="#" class="carousel-item_btn">阅读文章</a></div></div></div><div class="carousel-item carousel-item--4"><div class="carousel-item_image"></div><div class="carousel-item_info"><div class="carousel-item_container"><h2 class="carousel-item_subtitle">Palawan island</h2><h1 class="carousel-item_title">巴拉望岛</h1><p class="carousel-item_description">巴拉望岛是菲律宾西部岛屿,地势狭长,面积1.1785万平方公里,人口31.1548万,巴拉望岛和周围数千个小岛仍是原始的自然生态,因此被称为“海上的乌托邦”。</p><a href="#" class="carousel-item_btn">阅读文章</a></div></div></div><div class="carousel-item carousel-item--5"><div class="carousel-item_image"></div><div class="carousel-item_info"><div class="carousel-item_container"><h2 class="carousel-item_subtitle">Grand Bazaar, Tehran</h2><h1 class="carousel-item_title">德黑兰大市集</h1><p class="carousel-item_description">德黑兰大市集是当地最大的市集, 货品包罗万有, 如果慢慢逛, 应该可以流年数小时, 但需要留意市集内很容易迷路, 价格比其他伊朗城市高,特别是一些纪念品。</p><a href="#" class="carousel-item_btn">阅读文章</a></div></div></div>
</div><!-- partial --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="./script.js"></script>
</body>
</html>
$(function(){$('.carousel-item').eq(0).addClass('active');var total = $('.carousel-item').length;var current = 0;$('#moveRight').on('click', function(){var next=current;current= current+1;setSlide(next, current);});$('#moveLeft').on('click', function(){var prev=current;current = current- 1;setSlide(prev, current);});function setSlide(prev, next){var slide= current;if(next>total-1){slide=0;current=0;}if(next<0){slide=total - 1;current=total - 1;}$('.carousel-item').eq(prev).removeClass('active');$('.carousel-item').eq(slide).addClass('active');setTimeout(function(){},800);console.log('current '+current);console.log('prev '+prev);}});
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');* {box-sizing: border-box;
}html, body {margin: 0;padding: 0;width: 100%;height: 100%;display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;align-items: center;-webkit-align-items: center;
}body {background-color: #eaeaea;
}.carousel {width: 100%;height: 100%;display: flex;max-width: 900px;max-height: 550px;   overflow: hidden;position: relative;
}.carousel-item {visibility:visible;display: flex;width: 100%;height: 100%;align-items: center;justify-content: flex-end;-webkit-align-items: center;-webkit-justify-content: flex-end;position: relative;background-color: #fff;flex-shrink: 0;-webkit-flex-shrink: 0;position: absolute;z-index: 0;transition: 0.6s all linear;
}.carousel-item_info {height: 100%;display: flex;justify-content: center;flex-direction: column;display: -webkit-flex;-webkit-justify-content: center;-webkit-flex-direction: column;order: 1;left: 0;margin: auto;padding: 0 40px;width: 40%;}.carousel-item_image {width: 60%;height: 100%;order: 2;align-self: flex-end;flex-basis: 60%;-webkit-order: 2;-webkit-align-self: flex-end;-webkit-flex-basis: 60%;background-position: center;background-repeat: no-repeat;background-size: cover;position:relative;transform: translateX(100%);transition: 0.6s all ease-in-out;
}.carousel-item_subtitle {font-family: 'Open Sans', sans-serif;letter-spacing: 3px;font-size: 10px;text-transform: uppercase;margin: 0;color: #7E7E7E;    font-weight: 700;transform: translateY(25%);opacity: 0;visibility: hidden;transition: 0.4s all ease-in-out;
}.carousel-item_title {margin: 15px 0 0 0;font-family: 'Playfair Display', serif;font-size: 44px;line-height: 45px;letter-spacing: 3px;font-weight: 700;color: #2C2C2C;transform: translateY(25%);opacity: 0;visibility: hidden;transition: 0.6s all ease-in-out;
}.carousel-item_description {transform: translateY(25%);opacity: 0;visibility: hidden;transition: 0.6s all ease-in-out;margin-top: 35px;font-family: 'Open Sans', sans-serif;font-size: 13px;color: #7e7e7e;line-height: 22px;margin-bottom: 35px;
}.carousel-item--1 .carousel-item_image{background-image: url('https://source.unsplash.com/g31xUUbN_Go');
}.carousel-item--2 .carousel-item_image{background-image: url('https://source.unsplash.com/BqkbDOVoiyk');
}.carousel-item--3 .carousel-item_image{background-image: url('https://source.unsplash.com/wuH_U6EUyQI');
}.carousel-item--4 .carousel-item_image{background-image: url('https://source.unsplash.com/Sju9RqMILsw');
}.carousel-item--5 .carousel-item_image{background-image: url('https://source.unsplash.com/jwjGCvxjDlo');
}.carousel-item_btn {width: 35%;color: #2C2C2C;font-family: 'Open Sans', sans-serif;letter-spacing: 3px;font-size: 11px;text-transform: uppercase;margin: 0;width: 35%;font-weight: 700;text-decoration: none;transform: translateY(25%);opacity: 0;visibility: hidden;transition: 0.6s all ease-in-out;
}.carousel_nav {position: absolute;right: 0;z-index: 2;background-color: #fff;bottom: 0;
}.carousel_icon {display: inline-block;vertical-align: middle;width: 16px;fill: #5d5d5d;
}.carousel_arrow {cursor: pointer;display: inline-block;padding: 11px 15px;position: relative;
}.carousel_arrow:nth-child(1):after {content:'';right: -3px;position: absolute;width: 1px;background-color: #b0b0b0;height: 14px;top: 50%;margin-top: -7px;
}.active{z-index: 1;display: flex;visibility:visible;
}.active .carousel-item_subtitle, .active .carousel-item_title, .active .carousel-item_description,.active .carousel-item_btn{transform: translateY(0);opacity: 1;transition: 0.6s all ease-in-out;visibility: visible;
}.active .carousel-item_image{ 
transition: 0.6s all ease-in-out;
transform: translateX(0);
}

这篇关于用html实现一个文章图片缩略展示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/864211

相关文章

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl