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

  • 开发
  • 18

在这里插入图片描述

<!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);
}
阅读全部

相关推荐

  6. 常用英文缩略词

    2024-04-01 05:50:03       41 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-04-01 05:50:03       18 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-04-01 05:50:03       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-04-01 05:50:03       18 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-04-01 05:50:03       20 阅读

热门阅读

  1. 使用canvas内置api完成图片的缩放平移和导出和添加提示

    2024-04-01 05:50:03       17 阅读

  4. Leetcode 187. 重复的DNA序列

    2024-04-01 05:50:03       12 阅读

  5. spark log4j日志文件动态参数读取

    2024-04-01 05:50:03       16 阅读

  6. 近两周学习计划

    2024-04-01 05:50:03       18 阅读

  11. 同步复位和异步复位的优缺点

    2024-04-01 05:50:03       13 阅读

  15. 状态模式详解：管理对象状态的利器

    2024-04-01 05:50:03       20 阅读

  17. Vue-------脚手架概念

    2024-04-01 05:50:03       12 阅读

  24. el-upload上传图片给SpringBoot后端

    2024-04-01 05:50:03       14 阅读

  26. 【WPF应用25】C# WPF中的RadioButton控件：功能、用法与优化

    2024-04-01 05:50:03       19 阅读

  29. 2024系统架构师---面向对象架构风格的概念与应用

    2024-04-01 05:50:03       21 阅读