HTML部分
div><img src="img/2233.png"></div>
<div class="wrap">
<ul class="list">
<li class="item active"><img src="img/2233_1.jpg" ></li>
<li class="item"><img src="img/2233_2.jpg" ></li>
<li class="item"><img src="img/2233_3.jpg" ></li>
<li class="item"><img src="img/2233_4.jpg" ></li>
<li class="item"><img src="img/2233_5.jpg" ></li>
<li class="item"><img src="img/2233_6.png" ></li>
</ul>
<ul class="pointList">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
<li class="point" data-index="5"></li>
</ul>
<button type="button" class="btn" id="goPre"> < </button>
<button type="button" class="btn" id="goNext"> > </button>
</div>
CSS部分
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
position: relative;
width: 780px;
height: 438px;
margin: 100px auto 0 auto;
}
/*.list{
width: 780px;
height: 438px;
position: relative;
}*/
.item{
width: 100%;
height: 100%;
position: absolute;
/*规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明*/
opacity: 0;
/*设置元素过渡效果*/
transition: all 2s;
}
.btn{
width: 25px;
height: 50px;
position: absolute;
color: white;
border: none;
top: 195px;
z-index: 100;
background-color: rgba(0,0,0,.4);
cursor: pointer;
/*清除button默认蓝边*/
outline: none;
}
#goPre{
left: 0;
}
#goNext{
right: 0;
}
.item.active{
z-index: 10;
opacity: 1;
}
.pointList{
padding-left: 0;
position: absolute;
right: 20px;
bottom: 20px;
z-index: 1000;
}
.point{
width: 10px;
height: 10px;
background-color: rgba(0,0,0,.4);
border-radius: 100%;
float: left;
margin-right: 14px;
border-style: solid;
border-width: 2px;
border-color: rgba(255,255,255,.6);
}
.point:hover{
background-color: rgba(50,50,50,.4);
cursor: pointer;
}
.point.active{
background-color: rgba(255,255,255,.3);
}
JavaScript部分
var wrap = document.getElementsByClassName("wrap")[0];
// 获取所有图片
var items = document.getElementsByClassName("item");
// 获取所有圆钮
var points = document.getElementsByClassName("point");
// 获取切换上一张按键
var goPreBtn = document.getElementById("goPre");
// 获取切换下一张按键
var goNextBtn = document.getElementById("goNext");
// 设置定时器参数
var time = 0;
// 设置轮播参数
var index = 0;
// 重置所有样式
var clearActive = function(){
for(var i = 0;i < items.length;i++){
items[i].className = "item";
points[i].className = "point";
}
}
// 切换图片后的样式变化
var goIndex = function(){
clearActive();
items[index].className = "item active";
points[index].className = "point active";
}
// 下一张按键方法
var goNext = function(){
if(index < items.length - 1){
index ++;
}else{
index = 0;
}
goIndex();
}
// 上一张按键方法
var goPre = function(){
if(index == 0){
index = 4;
}else{
index --;
}
goIndex()
}
// 下一张按键 监听器
goNextBtn.addEventListener('click',function(){
// 重置定时器
time = 0;
goNext();
})
// 上一张按键 监听器
goPreBtn.addEventListener('click',function(){
// 重置定时器
time = 0;
goPre();
})
// 圆点按钮
for(var i = 0; i < points.length; i++){
// 圆点 监听器
points[i].addEventListener('click',function(){
// 节点匹配
var pointIndex = this.getAttribute("data-index");
// 轮播参数传递
index = pointIndex;
// 重置定时器
time = 0;
goIndex();
})
}
var times = setInterval(goNext,3000);
// 鼠标悬停清除定时器
wrap.onmouseover = function(){
clearInterval(times);
}
//鼠标离开恢复定时器
wrap.onmouseout = function(){
times = setInterval(goNext,3000);
}