<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片轮播插件</title>
<style>
*{
margin: 0;
padding: 0;
}
.slider1{
width: 800px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider2{
width: 800px;
height: 200px;
margin-top: 50px;
overflow: hidden;
position: relative;
}
.slider3{
width: 800px;
margin-top: 50px;
height: 200px;
overflow: hidden;
position: relative;
}
ul{
position: absolute;
left: 0;
top: 0;
list-style-type: none;
}
ul li{
float: left;
}
#num{
position: absolute;
right:20px;
bottom:20px;
}
#num span{
display: block;
float:left;
width:30px;
height: 30px;
line-height: 30px;
text-align: center;
margin-right:10px;
background: #ccc;
opacity: 0.8;
color:#fff;
}
#num span.active{
opacity: 1;
background: #1D5D76;
}
.left{
width: 56px;
height: 87px;
position: absolute;
left:10px;
top:57px;
background: url(lunboimg/left-arrow.png);
}
.right{
width: 56px;
height: 87px;
position: absolute;
right:10px;
top:57px;
z-index: 100;
background: url(lunboimg/right-arrow.png);
}
</style>
</head>
<body>
<div class="slider1">
<ul>
<li><img src="lunboimg/1(1).jpg" /></li>
<li><img src="lunboimg/2.jpg" /></li>
<li><img src="lunboimg/3.jpg" /></li>
<li><img src="lunboimg/4.jpg" /></li>
</ul>
</div>
<div class="slider2">
<ul>
<li><img src="lunboimg/1(1).jpg" /></li>
<li><img src="lunboimg/2.jpg" /></li>
<li><img src="lunboimg/3.jpg" /></li>
<li><img src="lunboimg/4.jpg" /></li>
</ul>
</div>
<div class="slider3">
<ul>
<li><img src="lunboimg/1(1).jpg" /></li>
<li><img src="lunboimg/2.jpg" /></li>
<li><img src="lunboimg/3.jpg" /></li>
<li><img src="lunboimg/4.jpg" /></li>
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="js/jquery.slider.js"></script>
<script>
$('.slider1').slider();
$('.slider2').slider({
numControl:true,
speed:500
});
$('.slider3').slider({
arrowControl:true
});
</script>
</html>
