Question

我正在尝试为我的网站创建一个幻灯片，其中不使用任何计时器，因为这就是我现在所拥有的，但是我希望用户能够使用导航按钮。我一直在尝试搜索它，但是遇到的一切似乎都很复杂，我无法掌握。因此，我想知道这里是否有人愿意解释我将如何做。

这里是情况的图片，以及我将如何使用它。这是一个覆盖物。

Answer 1

如果您的网站支持bootstrap，则可以使用bootstrap Carousel滑块。您可以通过设置属性来停止自动滑动

  $('.carousel').carousel({
          interval: false
   });

Answer 2

将此代码用于具有下降功能的导航面板

body
{
/*background: url (whatever you want to use) no-repeat; */
background-size: cover;
font-family: Arial;
color: white
}
ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li
{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a
{
color: white;
display: block;
}
ul li a:hover
{
background color:green;
}
ul li ul li
{
display: none;
}
ul li:hover ul li
{
display: block;
}

<html>
<link href ='style.css' rel= 'stylesheet' >
<ul>
<li><a>Home</a></li>
<li><a>About</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Things to do</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Contact</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>News</a>
<ul>
<li><a>First</a></li>
</ul>
</li>
</html>

如何制作幻灯片显示，用户可以在其中使用导航按钮，而无需使用计时器

2 个答案:

将此代码用于具有下降功能的导航面板