js+css实现自适应幻灯片效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：js+css实现自适应幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

/* --- UTILITY CLASSES --- */ 

.flex-center-all {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-center-all {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ----------------------- */

.wrapper {
  height: 100vh;
  position: relative;
  background: #eee;
}

.img-container {
  width: 60vw;
  height: 60vw;
}

img {
  width: 100%;
  height: 100%;
/*   object-fit: cover; */
}

.visible {
  display: inline;
  transition: all 0.125s;
}

.hidden {
  display: none;
  transition: all 0.125s;
}

.next-prev-btns {
  position: absolute;
  height: 10vh;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  padding: 0 7vw;
  align-items: center;
}

.prev-btn-container,
.next-btn-container {
  height: 8vw;
  width: 8vw;
}

button {
  background: none;
  border: 0;
  font-size: 10vw;
  border-radius: 50%;
  background: #387ca1;
  width: 100%;
  height: 100%;
  padding-bottom: 1.25vw;
  color: #ddd;
  transition: all 0.125s;
}

button:hover {
  cursor: pointer;
  background: #54b9f0;
  color: white;
  transition: all 0.125s;
}

.img-nav-container {
  position: absolute;
  bottom: 0;
  height: 4vw;
  top: calc(50% + 33vw);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.img-nav-item {
  width: 4vw;
  height: 100%;
  position: relative;
}

.img-nav-item:not(:last-child) {
  margin-right: 0.5vw;
}

.inner-circle {
  cursor: pointer;
  width: 2vw;
  height: 2vw;
  background: black;
  border-radius: 50%;
  box-sizing: content-box;
  border: 0.5vw solid white;
}

.img-nav-item-selected > .inner-circle,
.img-nav-item-selected > .outer-circle {
  cursor: unset;
}

.outer-circle {
  cursor: pointer;
  position: absolute;
  width: 3.5vw;
  height: 3.5vw;
  border-radius: 50%;
  transition: background 0.125s;
}

.img-nav-item-selected > .outer-circle {
  background: #999;
  transition: background 0.125s;
}

.img-nav-item:hover > .outer-circle {
  width: 3.75vw;
  height: 3.75vw;
  background: black;
  cursor: pointer;
}

/* override */
.img-nav-item-selected:hover > .outer-circle {
  width: 3.5vw;
  height: 3.5vw;
  background: #999;
  cursor: unset;
}

/* screen is taller than wide */
/* @media (max-aspect-ratio: 100/99) { 
   .wrapper {
     background: blue;
  }
} */

/* screen is wider than tall */
@media (min-aspect-ratio: 99/100) { 
  .img-container {
    width: 60vh;
    height: 60vh;
  }
  
  .next-prev-btns {
    height: 10vw;
    width: 100vh;
    padding: 0 7vh;
  }

  .prev-btn-container,
  .next-btn-container {
    height: 8vh;
    width: 8vh;
  }
  
  button {
    font-size: 10vh;
    padding-bottom: 1.25vh;
  }
  
  .img-nav-container {
    height: 4vh;
    top: calc(50% + 33vh);
  }
  
  .img-nav-item {
    width: 4vh;
  }
  
  .img-nav-item:not(:last-child) {
    margin-right: 0.5vh;
  }

  .inner-circle {
    width: 2vh;
    height: 2vh;
    border: 0.5vh solid white;
  }
  
  .outer-circle {
    width: 3.5vh;
    height: 3.5vh;
  }
  
  .img-nav-item:hover > .outer-circle {
    width: 3.75vh;
    height: 3.75vh;
  }

  /* override */
  .img-nav-item-selected:hover > .outer-circle {
    width: 3.5vh;
    height: 3.5vh;
  }
}
</style>


  
  
</head>

<body >
  <div class="wrapper flex-center-all">
  <div class="img-container">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" 
         alt="jellyfish" class="visible" id="img-1">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" 
         alt="jellyfish" class="hidden" id="img-2">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=im.........完整代码请登录后点击上方下载按钮下载查看