Javascript 需要帮助了解如何为html/css滑块添加更好的图像标题吗_Javascript_Html_Css

Javascript 需要帮助了解如何为html/css滑块添加更好的图像标题吗

javascript html css

Javascript 需要帮助了解如何为html/css滑块添加更好的图像标题吗,javascript,html,css,Javascript,Html,Css,我在一个网站上工作，我试图创建一个与图像相关联的文本图像滑块。我想知道的唯一一件事是如何设置每个图像，并在您将鼠标悬停在图像上时显示相关的标题，但我希望每个图像都有一个标题，该标题随滑块一起流动。如能提供任何帮助，我们将不胜感激！我现在的代码如下 <!DOCTYPE html> <html> <head> <title>HTML5/CSS3 Responsive Image Slider</title> <style type=

我在一个网站上工作，我试图创建一个与图像相关联的文本图像滑块。我想知道的唯一一件事是如何设置每个图像，并在您将鼠标悬停在图像上时显示相关的标题，但我希望每个图像都有一个标题，该标题随滑块一起流动。如能提供任何帮助，我们将不胜感激！我现在的代码如下

<!DOCTYPE html>
<html>
<head>
<title>HTML5/CSS3 Responsive Image Slider</title>
<style type="text/css">
#slider {
    overflow: hidden;
}
#slider figure {
    position: relative;
    width: 2800%;
    margin: 0;
    left: 0;
    animation: 135s slider infinite;
}
#slider figure img {
    float: left;
    width: 3.57%;
}
@keyframes slider {
    0%         {left: 0%;}
    1.78%      {left: 0%;}
    3.56%      {left: -100%;}
    5.34%      {left: -100%;}
    7.12%      {left: -200%;}
    8.90%      {left: -200%;}
    10.68%     {left: -300%;}
    12.46%     {left: -300%;}
    14.24%     {left: -400%;}
    16.02%     {left: -400%;}
    17.80%     {left: -500%;}
    19.58%     {left: -500%;}
    21.36%     {left: -600%;}
    23.14%     {left: -600%;}
    24.92%     {left: -700%;}
    26.70%     {left: -700%;}
    28.48%     {left: -800%;}
    30.26%     {left: -800%;}
    32.04%     {left: -900%;}
    33.82%     {left: -900%;}
    35.60%     {left: -1000%;}
    37.38%     {left: -1000%;}
    39.16%     {left: -1100%;}
    40.94%     {left: -1100%;}
    42.72%     {left: -1200%;}
    44.50%     {left: -1200%;}
    46.28%     {left: -1300%;}
    48.06%     {left: -1300%;}
    49.84%     {left: -1400%;}
    51.62%     {left: -1400%;}
    53.40%     {left: -1500%;}
    55.18%     {left: -1500%;}
    56.96%     {left: -1600%;}
    58.74%     {left: -1600%;}
    60.52%     {left: -1700%;}
    62.30%     {left: -1700%;}
    64.08%     {left: -1800%;}
    65.86%     {left: -1800%;}
    67.64%     {left: -1900%;}
    69.42%     {left: -1900%;}
    71.20%     {left: -2000%;}
    72.98%     {left: -2000%;}
    74.76%     {left: -2100%;}
    76.54%     {left: -2100%;}
    78.32%     {left: -2200%;}
    80.10%     {left: -2200%;}
    81.88%     {left: -2300%;}
    83.66%     {left: -2300%;}
    85.44%     {left: -2400%;}
    87.22%     {left: -2400%;}
    89.00%     {left: -2500%;}
    90.78%     {left: -2500%;}
    92.56%     {left: -2600%;}
    94.34%     {left: -2600%;}
    97.90%     {left: -2700%;}
    100.0%     {left: -2700%;}
    }
</style>
</head>
<body>
    <div id="slider">
        <figure>
            <img src="https://i.imgur.com/FRSxXro.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/Bum7YtT.png" title="This recipe was added as a end game way of obtaining Heart Dust">
            <img src="https://i.imgur.com/lPg9AZR.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/mIzEUcO.png" title="This recipe was added to resolve a recipe conflict">
            <img src="https://i.imgur.com/QjS8TmB.png" title="This recipe was added to create a reliable way of obtaing heart crystal shards">
            <img src="https://i.imgur.com/Z1KdPWr.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/k3xAQdm.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/sEXI5oi.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/qBerwFJ.png" title="Since it can be hard to explore at times this recipe was added as an alternative to the traditional recipe">
            <img src="https://i.imgur.com/pKhIeZI.png" title="The crafting cost of this item was increased due to community stating it made mass storage too easy to obtain">
            <img src="https://i.imgur.com/FROcXX1.png" title="The crafting cost of this item was increased due to its use in crafting extra hearts/lives">
            <img src="https://i.imgur.com/boQSDsB.png" title="This crafting recipe was added for endgame base building and recipes">
            <img src="https://i.imgur.com/lUH0VEG.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/DuczUCb.png" title="The crafting cost of this item was marginally reduced due to scarcity of resources">
            <img src="https://i.imgur.com/exrzspr.png" title="This recipe was added for the item to be used as a step in crafting extra lives/hearts">
            <img src="https://i.imgur.com/eZklzjN.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/dSOH45b.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/SzSGpMn.png" title="This recipe was added because of the lack of appropriate parent mod">
            <img src="https://i.imgur.com/tXM9QPi.png" title="This recipe was added because of the lack of appropriate parent mod">
            <img src="https://i.imgur.com/0r4fykM.png" title="This recipe was added because of the lack of appropriate parent mod">
            <img src="https://i.imgur.com/MI5xrJt.png" title="This recipe was added because of the lack of appropriate parent mod">
            <img src="https://i.imgur.com/LV21qhi.png" title="This recipe was added because of the lack of appropriate parent mod">
            <img src="https://i.imgur.com/oG4CnV1.png" title="This recipe was added because of the lack of appropriate parent mod">
            <img src="https://i.imgur.com/zYdoMw6.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/AP9FNTc.png" title="The crafting cost of this item was increased due to its use in crafting extra hearts/lives">
            <img src="https://i.imgur.com/OHWT31s.png" title="This recipe was added as an early game way of obtaining heart dust">
            <img src="https://i.imgur.com/9kBcp9F.png" title="The crafting cost of this item was increased due to its power">
            <img src="https://i.imgur.com/FRSxXro.png" title="The crafting cost of this item was increased due to its power">
        </figure>
    </div>
</body>
</html>


HTML5/CSS3响应图像滑块
#滑块{
溢出：隐藏；
}
#滑块图形{
位置：相对位置；
宽度：2800%；
保证金：0；
左：0；
动画：135秒滑块无限；
}
#滑块式img{
浮动：左；
宽度：3.57%；
}
@关键帧滑块{
0%{左：0%；}
1.78%{左：0%；}
3.56%{左：-100%；}
5.34%{左：-100%；}
7.12%{左：-200%；}
8.90%{左：-200%；}
10.68%{左：-300%；}
12.46%{左：-300%；}
14.24%{左：-400%；}
16.02%{左：-400%；}
17.80%{左：-500%；}
19.58%{左：-500%；}
21.36%{左：-600%；}
23.14%{左：-600%；}
24.92%{左：-700%；}
26.70%{左：-700%；}
28.48%{左：-800%；}
30.26%{左：-800%；}
32.04%{左：-900%；}
33.82%{左：-900%；}
35.60%{左：-1000%；}
37.38%{左：-1000%；}
39.16%{左：-1100%；}
40.94%{左：-1100%；}
42.72%{左：-1200%；}
44.50%{左：-1200%；}
46.28%{左：-1300%；}
48.06%{左：-1300%；}
49.84%{左：-1400%；}
51.62%{左：-1400%；}
53.40%{左：-1500%；}
55.18%{左：-1500%；}
56.96%{左：-1600%；}
58.74%{左：1600%；}
60.52%{左：-1700%；}
62.30%{左：-1700%；}
64.08%{左：-1800%；}
65.86%{左：-1800%；}
67.64%{左：-1900%；}
69.42%{左：-1900%；}
71.20%{左：-2000%；}
72.98%{左：-2000%；}
74.76%{左：-2100%；}
76.54%{左：-2100%；}
78.32%{左：-2200%；}
80.10%{左：-2200%；}
81.88%{左：-2300%；}
83.66%{左：-2300%；}
85.44%{左：-2400%；}
87.22%{左：-2400%；}
89.00%{左：-2500%；}
90.78%{左：-2500%；}
92.56%{左：-2600%；}
94.34%{左：-2600%；}
97.90%{左：-2700%；}
100.0%{左：-2700%；}
}

您可以制作一个div，其中包含一个img和span，该值将设置为滑块的滑块，如下所示

<figure>
<div class="sliderMain">
<img src="https://i.imgur.com/SzSGpMn.png" title="This recipe was added because of the lack of appropriate parent mod">
          <div class="captionStyling"> your caption content </div>

...

</figure>

Respectively do put all the images in this type of layout

如您所见，布局将相应地设置图像和标题的样式

将用于替代？不将div放置在图形中，并对所有图像重复此操作


#slider figure div {
    float: left;
    width: 3.57%;
}