html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script src="jquery-3.3.1.js"></script>
<style>
</style>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css">
<script src="../jquery-3.3.1.js"></script>
</head>
<body>
<div class="slider-box">
<ul class="slider-list">
<li class="slider-image"><img src="images/wallhaven-557342.jpg" /></li>
<li class="slider-image"><img src="images/wallhaven-590621.jpg"/></li>
<li class="slider-image"><img src="images/wallhaven-644594.jpg"/></li>
<li class="slider-image"><img src="images/wallhaven-665520.jpg" /></li>
<li class="slider-image"><img src="images/wallhaven-557342.jpg" /></li>
</ul>
<div class="dots">
<ul>
<li class="dot on"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
</ul>
</div>
<div class="slider-button">
<span class="prev">
css:
*{
margin:0;
padding:0;
list-style: none;
}
.slider-box{
position: relative;
width:600px;
height:300px;
overflow: hidden;
margin:200px;
}
.slider-list{
width:3000px;
height:300px;
position:absolute;
}
.slider-list li{
width:600px;
height:300px;
float:left;
}
.slider-image img{
width:600px;
height:300px;
}
.dots{
width:120px;
height:20px;
position:absolute;
background-color: rgba(0,0,0,.3);
left:50%;
margin-left:-60px;
padding:2px;
bottom: 0;
border-radius: 20px;
}
.dots ul{
position:absolute;
left:50%;
margin-left: -40px;
}
.dot{
height:8px;
width:8px;
background-color: rgba(255,255,255,.3);
float: left;
margin:6px 6px;
border-radius: 50%;
cursor: pointer;
transition:all ease 0.5s 0s;
}
.slider-button{
width:600px;
height:300px;
}
.prev{
display: block;
position: absolute;
width:50px;
height: 100%;
font-family: iconfont;
text-decoration: none;
color:rgba(0,0,0,.2);
font-size:30px;
text-align: center;
cursor: pointer;
vertical-align:center;
line-height: 300px;
}
.next{
display: block;
position: absolute;
right:0;
width:50px;
height: 100%;
font-family: iconfont;
text-decoration: none;
color:rgba(0,0,0,.2);
font-size:30px;
line-height: 300px;
cursor: pointer;
}
.slider-button:hover span{
background-color: rgba(0,0,0,.2);
color:white;
}
.on{
height:10px;
width:10px;
background-color: white;
}
@font-face {font-family: 'iconfont';
src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconfont.woff') format('woff'),
url('../fonts/iconfont.ttf') format('truetype'),
url('../fonts/iconfont.svg#iconfont') format('svg');
}
jquery:
$(function(){
let i=0;
let size=$('.slider-image').length;
// //小圆点开始
$(".dot").click(function(){
$(this).addClass("on").siblings().removeClass("on");
let index=$(this).index();
i = index;//将小圆点索引赋值给轮播图索引
$(".slider-list").stop().animate({ left: -index * 600 }, 600);
});
//小圆点结束
//定时器开始
let t = setInterval(function () { i++; move();},2000);
$(".slider-box").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(function () { i++; move(); }, 2000);
});
//定时器结束
//前后按钮开始
$(".next").click(function () {
i++;
move();
});
$(".prev").click(function () {
i--;
move();
});
//前后按钮结束
//轮播图移动开始
function move(){
if (i==5){
$('.slider-list').css({left:0});
i=1;
}
if(i==-1){
$(".slider-list").css({left:-(size-1)*600});
i=size-2;
}
$(".slider-list").stop().animate({ left: -i * 600 }, 600);
// i++;
if (i == size - 1) {
$(".dot").eq(0).addClass("on").siblings().removeClass("on");
} else {
$(".dot").eq(i).addClass("on").siblings().removeClass("on");
}
}
});
//轮播图移动结束