推荐:Nivo Slider jQuery 插件
Nivo Slider 是一个非常漂亮的 jQuery 图片轮播插件,它能够为你的网站提供一种高效且引人入胜的图片展示方式。以下是一个使用 Nivo Slider 的基本示例代码:
首先,确保在你的 HTML 文件中包含了 jQuery 库和 Nivo Slider 的 CSS 和 JavaScript 文件:
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
然后,在 HTML 文件中添加一个用于 Nivo Slider 的 div 容器:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="nivo-slider/img/1.jpg" alt="" />
<img src="nivo-slider/img/2.jpg" alt="" />
<img src="nivo-slider/img/3.jpg" alt="" />
<!-- 更多的图片 -->
</div>
</div>
最后,在你的 JavaScript 部分或者在页面加载完成后使用下面的代码初始化 Nivo Slider:
$(window).on('load', function() {
$('#slider').nivoSlider();
});
这样,你就有了一个基本的 Nivo Slider 实例,它会自动为你提供的图片进行轮播展示。你可以根据需要添加更多的自定义选项,例如动画效果、控制按钮、图片链接等。
评论已关闭