javascript - 背景图片的 CSS/JS 幻灯片

标签 javascript html css

我需要制作几张背景图片以随时间变化。我尝试了很多东西,但没有任何帮助。我还需要左右两个按钮,但我不知道如何将它们连接到幻灯片。请帮忙。

CSS

.slideSh {
height:900px;
background-image: url("images/back.jpg");
background-size: cover;
background-position: center;
}  

HTML

<div class="slideSh"> </div>

最佳答案

使用 Nivo slider :

<!-- Usually in the <head> section -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" 
/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="jquery.nivo.slider.pack.js"></script>


<!-- Then somewhere in the <body> section -->
<div id="slider-wrapper">
    <div id="slider">
        <img src="images/slide1.jpg" alt="" />
        <img src="images/slide2.jpg" alt="" />
        <img src="images/slide3.jpg" alt="" />
        <img src="images/slide4.jpg" alt="" />
    </div>
</div>

https://code.tutsplus.com/tutorials/code-your-own-juicy-tabbed-slider-using-the-nivo-slider--net-18724

关于javascript - 背景图片的 CSS/JS 幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43549115/

相关文章:

javascript - 如何获取三个按钮中的两个按钮的类名称?

javascript - 为什么这个 javascript 和 html 代码没有计算结果?

java - 在 Wicket 口中正确刷新包含面板的表格

html - Kendo 复选框切换 true 和 false 状态不能正常工作

javascript - 延迟问题的逆转过渡

html - 如何为 Hugo 中的一种元素添加默认的 CSS 类?

javascript - 使用谷歌翻译开发谷歌浏览器扩展

javascript - 在 jQuery 中使用 "class/object"MooTools 风格的事件

jquery - 响应/流体高度以适应任何屏幕尺寸

html - CSS clear left every 3rd element