使用 CSS/HTML 移动幻灯片 [英] Moving a slideshow using CSS/HTML

查看：31
本文介绍了使用 CSS/HTML 移动幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对 HTML/CSS 非常陌生，偶然发现了一个教程，可以帮助我为我正在制作的网站创建图像幻灯片.我想出了如何让幻灯片工作，但仍然没有想出如何移动它.抱歉，如果格式关闭，我会使用更漂亮的并且不太确定我是否喜欢它.提前致谢！

Clever Techie 的视频

/*图片滑块*/.slide-容器{顶部:150%；宽度:586px；高度:330；左边距:自动；右边距:自动；溢出:隐藏；文本对齐:居中；}.图像容器{顶部:100%；宽度:2344px；高度:330；位置:相对；过渡:左0.5s；-webkit-transition: 左 0.5s;-moz-transition: 左 1s;}.slider-image {向左飘浮;边距:0px；填充:0px；}.button 容器 {顶部:120%；位置:相对；}.slider-button {顶部:120%；显示:内联块；高度:10px；宽度:10px；边框半径:5px；背景色:#fff;}#slider-image-1:target~.image-container {左:0px；}#slider-image-2:target~.image-container {左:-586px；}#slider-image-3:target~.image-container {左:-1172px；}#slider-image-4:target~.image-container {左:-1758px；}

<h1>照片级风景</h1>
<div class="slide-container"><span id="slider-image-1"></span><span id="slider-image-2"></span><span id="slider-image-3"></span><span id="slider-image-4"></span><div class="image-container"><img src="https://via.placeholder.com/150" class="slider-image"/><img src="https://via.placeholder.com/150" class="slider-image"/><img src="https://via.placeholder.com/150" class="slider-image"/><img src="https://via.placeholder.com/150" class="slider-image"/>

<div class="button-container"><a href="#slider-image-1" class="slider-button"></a><a href="#slider-image-2" class="slider-button"></a><a href="#slider-image-3" class="slider-button"></a><a href="#slider-image-4" class="slider-button"></a>

解决方案

由于您还没有描述您需要哪种类型的幻灯片，我创建了可以自动运行或可由用户控制的幻灯片.用户点击或网站加载后，它会在 10 秒内启动自动幻灯片放映.每 3 秒自动更换幻灯片.看看这个片段:

var slideIndex = 0;var timer1，定时器；var slides = document.getElementsByClassName("mySlides");var dots = document.getElementsByClassName("dot");function showSlides() {//由自动幻灯片调用clearTimeout(timer1);//清除之前设置的定时器//清除样式for (var i = 0; i < slides.length; i++)幻灯片[i].style.display = "none";for (var i = 0; i < dots.length; i++)dots[i].className = dots[i].className.replace(" active", "");//重置幻灯片索引if (++slideIndex == slides.length)幻灯片索引 = 0;//重置样式幻灯片[slideIndex].style.display = "block";dots[slideIndex].className += "active";//重置定时器timer1 = setTimeout(showSlides, 3000);}function showSlide(n) {//当用户手动选择特定幻灯片时调用//清除之前设置的定时器清除超时(定时器 1)；清除超时(定时器)；//清除样式for (var i = 0; i < slides.length; i++)幻灯片[i].style.display = "none";for (var i = 0; i < dots.length; i++)dots[i].className = dots[i].className.replace(" active", "");//重置幻灯片索引如果(n == 幻灯片.长度)幻灯片索引 = 0;如果 (n <0)幻灯片索引 = 幻灯片.长度；//重置样式幻灯片[slideIndex].style.display = "block";dots[slideIndex].className += "active";//重置自动幻灯片的计时器timer = setTimeout(showSlides, 10000);}

/* 使宽度、高度、最小/最大属性包括内容、填充和边框 */* {box-sizing:border-box}/* 幻灯片容器 */.slideshow-container {宽度:50vw；高度:50vh；位置:相对；保证金:自动；清除:两者；背景颜色:黑色；}/* 默认隐藏图片 */.mySlides {显示:无；}/* 使图像适合幻灯片宽度 */.mySlides img {边距:0；位置:绝对；顶部:50%；左:50%；-ms-transform: 翻译 (-50%, -50%);变换:翻译(-50%，-50%)；文本对齐:居中；高度:50vh；对象适合:填充；}/* 下一个 &上一个按钮 */.prev, .next {光标:指针；位置:绝对；顶部:50%；边距:0；宽度:自动；填充:16px；白颜色;字体粗细:粗体；字体大小:xx-大；过渡:0.6s；用户选择:无；-ms-transform: translateY(-50%);变换:translateY(-50%);}/* 将下一步按钮"放在右侧 */.下一个 {右:0；}/* 在悬停时，添加一个黑色背景颜色，有点透明 */.prev:hover, .next:hover {背景颜色:黑色；不透明度:0.7；}/* 标题文本 */.文本 {颜色:#f2f2f2；字体大小:4em；padding-bottom: : 12px;位置:绝对；底部:8px；宽度:100%；文本对齐:居中；}/* 数字文本(1/3 等)*/.nu​​mbertext {颜色:#f2f2f2；字体大小:1.5em；填充:8px 12px；位置:绝对；顶部:0；z-索引:1；}/* 点容器 */.dots-容器{文本对齐:居中；}/* 点/项目符号/指标 */.dot {光标:指针；高度:15px；宽度:15px；边距:0 2px；背景颜色:#bbb；边界半径:50%；显示:内联块；过渡:背景色 0.6s 缓和；}.active, .dot:hover {背景色:#717171；}/* 淡入淡出动画 */.褪色 {-webkit-animation-name:淡入淡出；-webkit-animation-duration: 1.5s;动画名称:淡入淡出；动画持续时间:1.5s；}@-webkit-keyframes 淡出 {来自{不透明度:.4}到{不透明度:1}}@关键帧淡出{来自{不透明度:.4}到{不透明度:1}}/* 小设备特定的改动 */@media only screen and (max-width: 600px) {/* 幻灯片容器 */.slideshow-container {宽度:96vw；}.文本 {字体大小:1.5em；}.nu​​mbertext {字体大小:1em；}/* 下一个 &上一个按钮 */.prev, .next {填充:4px；字体粗细:粗体；字体大小:大；}}

<html lang="zh-cn"><头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>苹果</title><!-- 在页面加载时开始幻灯片放映.--><body onload="showSlide(1);"><div class="title"><h1>照片级风景</h1>

<!-- 幻灯片容器--><div class="slideshow-container"><!-- 带有数字和标题文本的全角图像--><div class="mySlides 淡出" ><div class="numbertext">1/4</div><img src="red.png"><div class="text">Caption Text</div>

<div class="mySlides 淡入淡出"><div class="numbertext">2/4</div><img src="blue.png"><div class="text">标题二</div>

<div class="mySlides 淡入淡出"><div class="numbertext">3/4</div><img src="green.png"><div class="text">标题三</div>

<div class="mySlides 淡入淡出"><div class="numbertext">4/4</div><img src="j.jpg"><div class="text">标题三</div>

<!-- 下一个和上一个按钮 --><a class="prev" onclick="showSlide(--slideIndex);">&#10094;</a><a class="next" onclick="showSlide(++slideIndex);">&#10095;</a>

<br><!-- 点/圆圈--><div class="dots-container"><span class="dot" onclick="showSlide(slideIndex = 0)"></span><span class="dot" onclick="showSlide(slideIndex = 1)"></span><span class="dot" onclick="showSlide(slideIndex = 2)"></span><span class="dot" onclick="showSlide(slideIndex = 3)"></span>

</html>

逻辑如下:

HTML

我们添加了 使页面宽度跟随设备宽度并将初始缩放设置为 1.0.

这些是课程

  1. slideshow-container - 存储容器
  2. mySlides - 幻灯片
  3. 淡入淡出 - 淡入淡出动画
  4. prev/next - 上一个、下一个按钮
  5. dots-container - 存储点
  6. 点 - 单个点

CSS重要的 CSS 添加是

  1. *(all) - 制作边框，填充包含在高度宽度的测量中
  2. slideshow-container - 将其设置为视口高度和宽度的 50%
  3. mySlides - 隐藏所有幻灯片
  4. mySlides img - 居中图像并设置边界
  5. .prev, .next - 禁用选择，改为指向光标添加过渡
  6. .numbertext - 将 z-index 设置为 1
  7. .dot - 更改为指向光标添加过渡
  8. @-webkit-keyframes 淡入淡出 - 设置 IE 特定的淡入淡出规则
  9. @keyframes 淡入淡出 - 设置淡入淡出规则
  10. @media only screen and (max-width: 600px) - 针对小屏幕设备的调整

JavaScript有两个功能:

  1. showSlides() - 用于创建自动幻灯片.
  2. showSlide(n) - 用于查看用户选择的幻灯片.

I'm pretty new to HTML/CSS and stumbled across a tutorial to help me create an image slideshow for a website I'm making. I figured out how to get the slideshow to work but still haven't figured out how to move it yet. sorry if the formatting is off I use prettier and not too sure if I like it. Thanks in advance!

Video by Clever Techie

/*image slider*/

.slide-container {
  top: 150%;
  width: 586px;
  height: 330;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-align: center;
}

.image-container {
  top: 100%;
  width: 2344px;
  height: 330;
  position: relative;
  transition: left 0.5s;
  -webkit-transition: left 0.5s;
  -moz-transition: left 1s;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
}

.button-container {
  top: 120%;
  position: relative;
}

.slider-button {
  top: 120%;
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: #fff;
}

#slider-image-1:target~.image-container {
  left: 0px;
}

#slider-image-2:target~.image-container {
  left: -586px;
}

#slider-image-3:target~.image-container {
  left: -1172px;
}

#slider-image-4:target~.image-container {
  left: -1758px;
}

<div class="title">
  <h1>Photoreal Scenery</h1>
</div>

<div class="slide-container">
  <span id="slider-image-1"></span>
  <span id="slider-image-2"></span>
  <span id="slider-image-3"></span>
  <span id="slider-image-4"></span>
  <div class="image-container">
    <img src="https://via.placeholder.com/150" class="slider-image" />
    <img src="https://via.placeholder.com/150" class="slider-image" />
    <img src="https://via.placeholder.com/150" class="slider-image" />
    <img src="https://via.placeholder.com/150" class="slider-image" />
  </div>
</div>
<div class="button-container">
  <a href="#slider-image-1" class="slider-button"></a>
  <a href="#slider-image-2" class="slider-button"></a>
  <a href="#slider-image-3" class="slider-button"></a>
  <a href="#slider-image-4" class="slider-button"></a>
</div>

解决方案

Since you haven't described which type of slideshow you need, I have created slideshow which can either run automatically or can be controlled by the user. After user click or site load, it start automatic slide show in 10s. Automatic slideshow change slides in every 3s. Check out this snippet:

var slideIndex = 0;
var timer1, timer;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");

function showSlides() {//called by automatic slideshow
    clearTimeout(timer1);//clear previously set timer 

    //clear styles
    for (var i = 0; i < slides.length; i++)
        slides[i].style.display = "none";           
    for (var i = 0; i < dots.length; i++) 
        dots[i].className = dots[i].className.replace(" active", "");
    
    //reset slideIndex
    if (++slideIndex == slides.length)
        slideIndex = 0;

    //reset styles
    slides[slideIndex].style.display = "block"; 
    dots[slideIndex].className += " active";
    
    //reset timer
    timer1 = setTimeout(showSlides, 3000);
}

function showSlide(n) {//called when user manually choose particular slide
    //clear previously set timers
    clearTimeout(timer1);
    clearTimeout(timer);

    //clear styles
    for (var i = 0; i < slides.length; i++) 
        slides[i].style.display = "none";
    for (var i = 0; i < dots.length; i++) 
        dots[i].className = dots[i].className.replace(" active", "");

    //reset slideIndex
    if (n == slides.length)
        slideIndex = 0; 
    if (n < 0)
        slideIndex = slides.length;

    //reset styles
    slides[slideIndex].style.display = "block"; 
    dots[slideIndex].className += " active";

    //reset timer for automatic slideshow
    timer = setTimeout(showSlides, 10000);
}

/* make width, height, min/max properties includes content, padding and border */
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
    width: 50vw;
    height: 50vh;
    position: relative;
    margin: auto;
    clear:both;
    background-color: black;        
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* make images fit to slide width */
.mySlides img {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    height: 50vh; object-fit:  fill;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin: 0;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: xx-large;
    transition: 0.6s;
    user-select: none;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

}

/* Position the "next button" to the right */
.next {
    right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: black;
    opacity: 0.7;
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 4em;
    padding-bottom: : 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 1.5em;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    z-index: 1;
}


/* Dots container */
.dots-container {
    text-align: center;
}


/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

/* Small devices specific alterations */
@media only screen and (max-width: 600px) {
    /* Slideshow container */
    .slideshow-container {
        width: 96vw;
    }

    .text {
        font-size: 1.5em;
    }

    .numbertext {
        font-size: 1em;
    }

    /* Next & previous buttons */
    .prev, .next {
        padding: 4px;
        font-weight: bold;
        font-size: large;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple</title>
</head>
<!-- start slideshow on page load. -->
<body onload="showSlide(1);">
    <div class="title">
        <h1>Photoreal Scenery</h1>
    </div>

    <!-- Slideshow container -->
    <div class="slideshow-container">

        <!-- Full-width images with number and caption text -->
        <div class="mySlides fade" >
            <div class="numbertext">1 / 4</div>
            <img src="red.png">
            <div class="text">Caption Text</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">2 / 4</div>
            <img src="blue.png">
            <div class="text">Caption Two</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">3 / 4</div>
            <img src="green.png">
            <div class="text">Caption Three</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">4 / 4</div>
            <img src="j.jpg">
            <div class="text">Caption Three</div>
        </div>

        <!-- Next and previous buttons -->
        <a class="prev" onclick="showSlide(--slideIndex);">&#10094;</a>
        <a class="next" onclick="showSlide(++slideIndex);">&#10095;</a>
    </div>
    <br>

    <!-- The dots/circles -->
    <div class="dots-container">
        <span class="dot" onclick="showSlide(slideIndex = 0)"></span> 
        <span class="dot" onclick="showSlide(slideIndex = 1)"></span> 
        <span class="dot" onclick="showSlide(slideIndex = 2)"></span> 
        <span class="dot" onclick="showSlide(slideIndex = 3)"></span> 
    </div>
</body>
</html>

Here is the logic:

HTML

We have added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to make page-width follows device width and set initial scaling to 1.0.

These are the classes

  1. slideshow-container - store container
  2. mySlides - slides
  3. fade - fade animation
  4. prev/next - previous, next buttons
  5. dots-container - store dots
  6. dot - individual dot

CSS Important CSS additions are

  1. *(all) - make border, padding included in measurements of height width
  2. slideshow-container - set it to 50% of viewport height and width
  3. mySlides - hide all slides
  4. mySlides img - center image and set bounds
  5. .prev, .next - disable selection, change to pointing cursor add transition
  6. .numbertext - set z-index to 1
  7. .dot - change to pointing cursor add transition
  8. @-webkit-keyframes fade - setup IE specific fading rules
  9. @keyframes fade - setup fading rules
  10. @media only screen and (max-width: 600px) - tweaks for small screen devices

JavaScript There are 2 functions:

  1. showSlides() - used to create automatic slideshow.
  2. showSlide(n) - used to view slide selected by the user.

这篇关于使用 CSS/HTML 移动幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆