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

【问题标题】：How to add slide images in webpage如何在网页中添加幻灯片图像
【发布时间】：2017-08-14 05:07:54
【问题描述】：

我正在从事网站设计，我也是这方面的新手。我只想使用 HTML 和 CSS 在我的网页中添加滑动图像，因为我不熟悉 JavaScript。请给出您添加图像滑块的建议。在此先感谢:)

【问题讨论】：

owlcarousel2.github.io/OwlCarousel2
你肯定需要 JavaScript。试试这个：flickity.metafizzy.co
如果你只想使用 HTML 和 CSS，你可以关注这个smashingmagazine.com/2012/04/pure-css3-cycling-slideshow 但尝试使用 Javascript，这是学习它的最佳方式

标签： javascript html css image slider

【解决方案1】：

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

Demo

【讨论】：

【解决方案2】：

欢迎来到网络开发丛林=D

最简单也是最好的方法就是使用 Bootstrap。 Bootstrap，如果你不知道，它是一个“网格”，可以固定你的网页。很好，因为它具有响应性和简单的配置...啊，而且它的免费 =)

他们还有一个很棒的 javascript 插件，作为轮播，看看 =) http://getbootstrap.com/javascript/#carousel

如果你想自己做所有事情，那么我建议你的最简单方法是，因为我不知道你的技能，所以一次加载嵌套在 DIV 中的所有图像，例如：

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

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

但是，它有它的问题，例如如果你要调整大小等等，所以正如我的老师总是说的，如果已经发现轮子，就不需要发现它。 =)

希望对你有帮助 =D

【讨论】：

他想要一个仅 HTML/CSS 的解决方案

【解决方案3】：

这是一个仅 HTML 和 CSS 的滑块！

 .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;
        }

<!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>

【讨论】：