JavaScript代码
注意：最好不要放到<head></head>内，这是我遇到的一个bug，在这个区域内刚开始用webstorm在网页上可以运行，第二天轮播图无法播放，放到<body>内就正常播放了
可放到<body>和<head>内任何地方，注意区分清楚
/*JavaScript代码*/
<script>
var aImg = document.querySelectorAll(".pic img");//获取图片
var aBtn = document.querySelectorAll(".btn p"); //获取两侧点击图片
var aDot =document.querySelectorAll(".dot li"); //左下角小圆点点击事件
var oBanner = document.querySelector(".banner"); //轮播框架设计
var length = aImg.length; //图片长度
var idx = 0; //索引 记录图片的位置 时间从零开始
var timer = null; //定时器，图片轮播时间
/*轮播*/
move();
function move(){
timer = setInterval(set,2000); //定时器 （方法，数值） 数值轮播时间
function set(){
aImg[idx].className = ""; //默认向右播放
idx++;
if(idx > length - 1)
idx = 0;
aImg[idx].className = "on";
change();
};
};
oBanner.onmouseover = function(){ //鼠标移入框架内，停止轮播
clearInterval(timer); //清除定时器
};
oBanner.onmouseout = function(){ //鼠标移出框架后，重新轮播
move(); //让函数重新执行
}
/*点击事件:图片切换*/
aBtn[0].onclick = function(){ //左侧图片，点击事件
aImg[idx].className = "";
idx--;
if(idx < 0)
idx = length - 1;
aImg[idx].className = "on";
change();
};
aBtn[1].onclick = function(){ //右侧图片，点击事件
aImg[idx].className = "";
idx++;
if(idx > length - 1)
idx = 0;
aImg[idx].className = "on";
change();
};
/*给小圆点注册点击事件*/
for(var i = 0 ;i < length ; i++){
aDot[i].index = i;//索引 记录小圆点位置
aDot[i].onclick = function(){
aImg[idx].className ="";
idx = this.index;//匹配小圆点和图片的位置 --同步
aImg[idx].className = "on";
change();
};
};
/*小圆点样式的变化*/
function change(){
for(var i = 0; i <length ;i++){
aDot[i].className = "";
};
aDot[idx].className = "active";
};
</script>
CSS样式
CSS样式
<style type="text/css">
/*整个轮播图布局*/
.banner{
position:absolute;
margin-top:2px;
width:800px;
height:300px;
border:1px solid #CCCCCC;
}
/*图片布局*/
.pic a img{
position:absolute;
top:0;
left:0;
opacity:0;
transition:1s;
}
/*图片透明度*/
.pic a img.on{
opacity:1; /* 原样显示*/
}
/*两侧小图片布局样式*/
.btn p{
position:absolute;
top:40%; /* 两侧小图片*/
width:55px;
height:55px;
cursor:pointer;
border-radius:10px;
}
.btn p:nth-child(1){
left:0;
background: url(../img/zuo1.png) no-repeat; /*左侧小图片*/
}
.btn p:nth-child(2){
right:0;
background: url(../img/you.png) no-repeat; /*右侧小图片*/
}
.btn p:hover{
opacity:0.7;
}
/*下方点击事件布局*/
.banner ol{
position:absolute;
display:flex;
bottom:10px;
width:200px;
height:30px;
list-style-type:none;
margin-left: 30%; /*下方点击事件跳转图片位置调放*/
justify-content:space-around;
}
/*下方点击事件样式*/
.banner ol li{
width:10px;
height:10px;
box-shadow:0 0 10px 0 #000;
font:bold 20px/30px "";
text-align:center;
color:#fff;
background:#ccc;
cursor:pointer;
}
/*下方点击事件透明度*/
.banner ol li:hover{
opacity:0.7;
}
/*下方点击事件颜色*/
.banner ol li.active{
background: rgba(106, 255, 60, 0.98);
}
</style>
轮播图引用的代码
图片根据自己需求更改
div下的代码
图片的存放位置
<div class="banner">
<div class="pic">
<a href="#"><img src="../img/tupian.jpg" class="on" width="100%" height="100%"></a>
<a href="#"><img src="../img/tupian.jpg" width="100%" height="100%"></a>
<a href="#"><img src="../img/tupian.jpg" width="100%" height="100%"></a>
<a href="#"><img src="../img/tupian.jpg" width="100%" height="100%"></a>
<a href="#"><img src="../img/tupian.jpg" width="100%" height="100%"></a>
</div>
<div class="btn">
<p></p>
<p></p>
</div>
<ol class="dot">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>