Question

我正在进行网站设计，我也是一个新手。我想使用HTML和CSS在我的网页中添加滑动图像，因为我不熟悉JavaScript。请提出添加图片滑块的建议。提前谢谢：）

Answer 1

欢迎来到网络发展的丛林= D

最简单也许最好的方法是使用Bootstrap。 Bootstrap，如果您不知道，它是一个“网格”，用于修复您的网页。这很好，因为它的响应性和简单的配置......啊，它的免费=）

他们还有一个很棒的javascript插件，如轮播，检查出来=） http://getbootstrap.com/javascript/#carousel

如果你想自己做所有事情，那么我建议你最简单的方法，就是我不知道你的技能，就是将所有图像连续加载到DIV中，如：< / p>

然后在css中你可以给它们所有相同的宽度和高度，例如500px宽度和500px高度。

然后，根据您是希望它向上或向下滑动，您可以使用javascript，按时间或单击来控制div中的位置。 div应该有css overflow：hidden;

但是，它有它的问题，例如，如果你要调整大小等等，所以正如我的老师总是说的那样，如果已经发现它，就没有必要发现它。 =）

希望有帮助= D

Answer 2

这是一个HTML和CSS Only Slider！

＆＃13;

 .slider-holder
        {
            width: 800px;
            height: 400px;
            background-color: yellow;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            overflow: hidden;
        }
        
        .image-holder
        {
            width: 2400px;
            background-color: red;
            height: 400px;
            clear: both;
            position: relative;
            
            -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;
        }
        
        .slider-image
        {
            float: left;
            margin: 0px;
            padding: 0px;
            position: relative;
        }
        
        #slider-image-1:target ~ .image-holder
        {
            left: 0px;
        }
        
        #slider-image-2:target ~ .image-holder
        {
            left: -800px;
        }
        
        #slider-image-3:target ~ .image-holder
        {
            left: -1600px;
        }
        
        .button-holder
        {
            position: relative;
            top: -20px;
        }
        
        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 5px;
            background-color: brown;
        }

＆＃13;

<!doctype html>
<html>
<head>
    <title>QNimate Slider</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="slider-holder">
        <span id="slider-image-1"></span>
        <span id="slider-image-2"></span>
        <span id="slider-image-3"></span>
        <div class="image-holder">
            <img src="http://labs.qnimate.com/slider/1.jpg" class="slider-image" />
            <img src="http://labs.qnimate.com/slider/2.jpg" class="slider-image" />
            <img src="http://labs.qnimate.com/slider/3.jpg" class="slider-image" />
        </div>
        <div class="button-holder">
            <a href="#slider-image-1" class="slider-change"></a>
            <a href="#slider-image-2" class="slider-change"></a>
            <a href="#slider-image-3" class="slider-change"></a>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 3

你可以试试这个。制作幻灯片图片非常简单

Demo

如何在网页中添加幻灯片图像

3 个答案: