jQuery插件jSlider图⽚轮播jSlider是⼀个⾮常好的图⽚轮播插件。
有导航箭头，可以⾃动播放，可以循环播放。
官⽅⽹站 github/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">
jquery在线图片
<!--引⽤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="ajax.aspnetcdn/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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。