代码之家 › 专栏 › 技术社区 › Aditya

如何使用html和css在页面上制作幻灯片

css3 html5

0

Aditya · 技术社区 · 8 年前

在下面的HTML中,我想介绍幻灯片,但是我不能这样做,我想把幻灯片1滑到左边,这样幻灯片2就可以看到了。如何做到这一点?

下面是示例图片:这里是关于箭头的fet图片,我只需要这3个圆。

<!DOCTYPE html>
<html>

<head>
<style>

.slide-1{
   font-family: "Quicksand";
}

.slide-2{
   font-family: "Quicksand";
}

</style>

</head>

<body>

<div>

<div class="slide-1">
  <p text-wrap>This is the slide 1 content</p>
</div>

<div class="slide-2">
<p text-wrap>This is slide 2 content.And this will only be visible when user touch and side to the left of slide-1.How is this possible?</p></div>

</div>

</body>
</html>

2 回复 | 直到 8 年前

1

Roy Bogado 8 年前

Bootstrap:

https://getbootstrap.com/

与世界各地的最流行的前端组件库。

bootstrap是一个用于使用html、css和 JS。使用我们的 sass变量和混合,响应网格系统,广泛的预构建组件和基于jquery的强大插件。

有一个很好的组件叫做 旋转木马 . https://getbootstrap.com/docs/4.1/components/carousel/
下面是一个例子:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="https://content.nike.com/content/dam/one-nike/en_lu/SU16/Running/Free-xcat/Desktop/SU16_RN_NikeFree_InnovationHub_M_CDP_P1.jpg.transform/full-screen/SU16_RN_NikeFree_InnovationHub_M_CDP_P1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://www.pandasecurity.com/spain/mediacenter/src/uploads/2014/08/free.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://blog.bufferapp.com/wp-content/uploads/2014/05/6110974997_8b0dfa13a0_b.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

2

0

javier ivan castellanos perez 8 年前

以这个例子为例,它包含可以使用的脚本联盟,以便控制转换的节奏,并且可以使用样式

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
* {
    margin: 0;
    padding: 0;
}
.main {

    width:50%;

    max-width: 1000px;
    margin:40px auto;
}
.slides {
    width:100%;
}

.slides img {
    width:70%;
    height:100%

}

.slidesjs-pagination {

    list-style:none;
    overflow:hidden;

}

.slidesjs-pagination li {
    float:left;
}

.slidesjs-pagination li a {
    border-radius: 100px;
    display:block;
    padding:10px 20px;
    color:rgba(220,220,220,0);
    text-decoration:none;
    background-color: rgba(220,220,220,0.6);

}

.slidesjs-pagination li a:hover {
    background:#000;
}

.slides .active {
    background-color: rgba(180,180,180,0.6);
    color: rgba(180,180,180,0);
}

.slidesjs-navigation{
    background-color: rgba(220,220,220,0.6);
    color:#000;
    text-decoration:none;
    display:inline-block;
    padding:13.6px 20px;
    float:right;
}

</style>
<body>

    <div class="main">
        <div class="slides">
            <img src="http://www.seguridad-maestro.tk/slideshow/1.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/2.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/3.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/4.jpg" alt="">
        </div>
    </div>

    <script src="http://www.seguridad-maestro.tk/jquery-1.9.1.min.js"></script>
    <script src="http://www.seguridad-maestro.tk/slideshow.js"></script>
    <script src="http://www.seguridad-maestro.tk/js/jquery.slides.js"></script>

</body>
</html>