用html编一个程序,在网页上插入幻灯片式的动画图片,并且每个图片有个超链接

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用html编一个程序,在网页上插入幻灯片式的动画图片,并且每个图片有个超链接相关的知识,希望对你有一定的参考价值。

就是和这个类似,在网页中插入图片,但这个图片随着鼠标可以切换,且图片有超链接,怎么做啊?大神们

参考技术A

建议你去网上找一个这样的模板,网上有很多哦,我以前也找过。

参考技术B 这个是选项卡,可以在特效网上搜的,比如在懒人图库搜tab,图片随鼠标变换,是因为内容框变了,想给图片加链接,就直接在图片上加超链接本回答被提问者采纳 参考技术C 你用百度搜一下 幻灯片代码 会有好多现在的代码可以让你用,效果也有好多种追问

重点不是幻灯片啊,亲,重点是这种效果里,添加超链接啊

追答

给图片加个链接,幻灯片功能都带这个的

如何在幻灯片中添加滚动动画?

【中文标题】如何在幻灯片中添加滚动动画?【英文标题】:How do I add a scrolling animation to my slideshow? 【发布时间】:2020-10-31 14:01:10 【问题描述】:

我已经构建了一个非常基本的 HTML/CSS/JS 幻灯片。当我点击右边的按钮时,幻灯片切换到下一张幻灯片,当我点击左边的按钮时,幻灯片切换到上一张幻灯片。

不过,我想添加一个滚动动画,让幻灯片感觉不那么僵硬;当我按下右侧的按钮时,我希望幻灯片从右侧“滑入”,当我按下左侧的按钮时,我希望它从左侧滑入。

我一直在研究可能的方法来做到这一点,并遇到了 CSS 动画,特别是 w3.css 框架 (https://www.w3schools.com/w3css/w3css_animate.asp),但我不确定我将如何实现这一点,因为我的幻灯片已经使用了为了在幻灯片之间切换。

这是我的代码:

var content = ["Slide 1", "Slide 2", "Slide 3"];
var style = ["background-color: blue;", "background-color: red;", "background-color: green;"];
var index = 0;

function next() 
  if (index == (content.length - 1)) 
    index = 0
   else 
    index = index + 1
  

  document.getElementById("slide").innerHTML = content[index];
  document.getElementById("slideshow").style = style[index];


function back() 
  if (index == 0) 
    index = (content.length - 1)
   else 
    index = index - 1
  

  document.getElementById("slide").innerHTML = content[index];
  document.getElementById("slideshow").style = style[index];
.slideshow 
  position: relative;
  height: 170px;
  color: white;
  background-color: blue;


.slideshow p 
  position: absolute;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;


.slideshow button 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
<!DOCTYPE html>
<html lang="en">

<body>

  <div class="slideshow" id="slideshow">
    <p id="slide">Slide 1</p>
    <button onclick="back()" style="left: 0">&#10094;</button>
    <button onclick="next()" style="right: 0">&#10095;</button>
  </div>

</body>

</html>

提前致谢。

【问题讨论】:

这有帮助吗? ***.com/questions/16989585/… 这能回答你的问题吗? CSS 3 slide-in from left transition 【参考方案1】:

您可以使用 CSS 设置下一个和上一个类的样式,然后使用像 sn-p 这样的 js 切换它们

var content = ["Slide 1", "Slide 2", "Slide 3"];
var style = ["background-color: blue;", "background-color: red;", "background-color: green;"];
var index = 0;

function next() 
    const slide = document.getElementById("slide");
    if (index == (content.length - 1)) 
        index = 0;
     else 
        index = index + 1;
    

    // wipe out class
    slide.className = '';
    // add next class
    setTimeout(() => slide.classList.add('next'), 0);

    slide.innerHTML = content[index];
    slide.style = style[index];


function back() 
    const slide = document.getElementById("slide");
    if (index == 0) 
        index = (content.length - 1);
     else 
        index = index - 1;
    

    // wipe out class
    slide.className = '';
    // add prev class
    setTimeout(() => slide.classList.add('prev'), 0);

    slide.innerHTML = content[index];
    slide.style = style[index];
.slideshow 
    position: relative;
    height: 170px;
    color: white;
    overflow: hidden;


.slideshow p 
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 170px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    background-color: blue;



.slideshow button 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;


.prev 
    animation: prev 1s ease-in-out forwards;


.next 
    animation: next 1s ease-in-out forwards;


@keyframes prev 
    from 
        left: -150%;
    

    to 
        left: 50%;
    


@keyframes next 
    from 
        right: -150%;
    

    to 
        right: -50%;
    
    <div class="slideshow" id="slideshow">
        <p id="slide" class="next">Slide 1</p>
        <button onclick="back()" style="left: 0">&#10094;</button>
        <button onclick="next()" style="right: 0">&#10095;</button>
    </div>

【讨论】:

是否可以在幻灯片背景上也做同样的事情(即蓝色幻灯片中的绿色幻灯片)? 我已经更新了我的答案,检查一下,如果您有任何疑问,请告诉我

以上是关于用html编一个程序,在网页上插入幻灯片式的动画图片,并且每个图片有个超链接的主要内容,如果未能解决你的问题,请参考以下文章

ubuntu 10.10 幻灯片动画有问题,求助

PPT幻灯片中图表动画播放效果为:出现、按序列怎么设置?

UITableView卡片式分组

图片可以设置多个热点但不可以添加文本热点到图片中

小程序设置动画效果

css3如何实现边框阴影