轮播图功能
1.点击上一页按钮，返回上一页；点击下一页按钮，进入下一页；
2.图片每隔3秒自动轮播，鼠标移入时轮播停止
3.小圆点和图片保持动态联系，点击小圆点可跳转到指定页。
涉及的知识点
HTML
1.列表
2.按钮
3.data-自定义类
CSS
1.相对定位和绝对定位
2.z-index
JS
1.for循环
2.if语句
3.定时器和清除定时器
4.onmouseover和onmouseleave
5.onclick绑定事件
代码展示
HTML文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东轮播图</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_3007608_225lisdbnn9.css">
<script src="/js/main.js"></script>
</head>
<body>
<div class="wrap">
<ul class="list" onm ouseover="stop()" onm ouseleave="start()">
<li class="item active"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<button class="lefbtn" onclick="goBack()">
<i class="iconfont"></i>
</button>
<button class="rigbtn" onclick="goNext()">
<i class="iconfont"></i>
</button>
<ul class="pointerList">
<li class="pointer active" data-num="0" onclick="goPointer(this)"></li>
<li class="pointer" data-num="1" onclick="goPointer(this)"></li>
<li class="pointer" data-num="2" onclick="goPointer(this)"></li>
<li class="pointer" data-num="3" onclick="goPointer(this)"></li>
<li class="pointer" data-num="4" onclick="goPointer(this)"></li>
<li class="pointer" data-num="5" onclick="goPointer(this)"></li>
<li class="pointer" data-num="6" onclick="goPointer(this)"></li>
<li class="pointer" data-num="7" onclick="goPointer(this)"></li>
</ul>
</div>
</body>
</html>CSS文件代码
.wrap{
width: 590px;
height: 470px;
margin: 60px 340px;
position: relative;
}
.list{
width: 590px;
height: 470px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.item{
width: 100%;
height: 100%;
position: absolute;
font-size: 60px;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.item:nth-child(1){
background: url("/images/1.jpg") no-repeat;
background-size: cover;
}
.item:nth-child(2){
background: url("/images/2.jpg") no-repeat;
background-size: cover;
}
.item:nth-child(3){
background: url("/images/3.jpg") no-repeat;
background-size: cover;
}
.item:nth-child(4){
background: url("/images/4.jpg") no-repeat;
background-size: cover;
}
.item:nth-child(5){
background: url("/images/5.jpg") no-repeat;
background-size: cover;
}
.item:nth-child(6){
background: url("/images/6.jpg") no-repeat;
background-size: cover;
}
.item:nth-child(7){
background: url("/images/7.jpg") no-repeat;
background-size: cover;
}
.item:nth-child(8){
background: url("/images/8.jpg") no-repeat;
background-size: cover;
}
.item.active{
z-index: 10;
opacity: 1;
}
@font-face {
font-family: 'iconfont'; /* project id 3133951 */
src: url('');
src: url('?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_3133951_hcxegprf964.woff2') format('woff2'),
url('//at.alicdn.com/t/font_3133951_hcxegprf964.woff') format('woff'),
url('//at.alicdn.com/t/font_3133951_hcxegprf964.ttf') format('truetype'),
url('//at.alicdn.com/t/font_3133951_hcxegprf964.svg#iconfont') format('svg');
}
.lefbtn{
width: 30px;
height: 40px;
font-size: 20px;
color: white;
background-color: black;
opacity: 0.2;
border: none;
border-radius: 0 15px 15px 0;
position: absolute;
top: 215px;
left: 0px;
cursor: pointer;
z-index: 100;
}
.rigbtn{
width: 30px;
height: 40px;
font-size: 20px;
color: white;
background-color: black;
opacity: 0.2;
border: none;
border-radius: 15px 0 0 15px;
position: absolute;
top: 215px;
left: 560px;
cursor: pointer;
z-index: 100;
}
.lefbtn:hover,.rigbtn:hover{
opacity: 0.4;
}
.pointerList{
position: absolute;
top: 400px;
z-index: 100;
}
.pointer{
list-style: none;
display: inline-block;
background-color: white;
opacity: 0.4;
width: 10px;
height: 10px;
border: none;
border-radius: 50%;
cursor: pointer;
margin-right: 5px;
vertical-align: middle;
}
.pointer.active{
width: 12px;
height: 12px;
opacity: 1;
}JS文件代码
var items=document.getElementsByClassName("item");
var pointers=document.getElementsByClassName("pointer");
var num=0;
//初始化，清除列表所有的active类
function clearActive(){
for(i=0;i<items.length;i++){
items[i].className="item";
};
for(i=0;i<pointers.length;i++){
pointers[i].className="pointer";
}
}
//给指定列表添加active类
function goPage(){
clearActive();
items[num].className="item active";
pointers[num].className="pointer active";
}
//上一页
function goBack(){
if(num==0){
num=7;
}
else{
num--;
}
goPage();
}
//下一页
function goNext(){
if(num<7){
num=num+1;
}
else{
num=0;
}
goPage();
}
//点击小圆点，跳转指定页
function goPointer(pointer){
var pointernum=pointer.getAttribute("data-num");
num=pointernum;
goPage();
}
//定时器，鼠标移出时，每隔3秒进入下一页
var a=null;
function start(){
a=setInterval("goNext()", 3000);
}
//清除定时器，鼠标移入时轮播停止
function stop(){
clearInterval(a);
}效果展示：