有导航箭头，可以自动播放，可以循环播放。
官方网站 https://github.com/copthuy/jSlider
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>jSlider 图片轮播插件</title>
<meta name="description" content="jSlider JS example">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--引用css样式-->
<link rel="stylesheet" href="jSlider.min.css">
</head>
<body>
<div class="jSlider" id="slider-example">
<div><img src="images/photo1.png"></div>
<div><img src="images/photo2.png"></div>
<div><img src="images/photo3.png"></div>
<div><img src="images/photo4.png"></div>
<div><img src="images/photo5.png"></div>
<div><img src="images/photo6.png"></div>
</div>
<!--引用jquery.js样式-->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
<!--引用js样式-->
<script src="jquery.jSlider.min.js"></script>
<!--初始化图片轮播jSlider -->
<script>
$(‘#slider-example‘).sliderInit({
‘navigation‘: ‘hover‘,
‘indicator‘: ‘always‘,
‘speed‘: 500, //速度
‘delay‘: 5000, //延迟
‘transition‘: ‘slide‘,
‘loop‘: true,
‘group‘: 1
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/lszw/p/11054880.html
时间： 2024-12-07 03:56:39