<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.wrap{
width: 800px;
height: 400px;
position: relative;
}
.list{
width: 800px;
height: 400px;
list-style: none;
border: 1px solid yellow;
position: relative;
}
.item{
width: 100%;
height: 100%;
color: white;
font-size: 20px;
opacity: 0;
transition: all .8s;
position: absolute;
}
.item:nth-child(1){
background-color: black;
}
.item:nth-child(2){
background-color: red;
}
.item:nth-child(3){
background-color: yellow;
}
.item:nth-child(4){
background-color: green;
}
.item:nth-child(5){
background-color: pink;
}
.btn{
width: 50px;
height: 100px;
position: absolute;
top: 150px;
z-index: 100;
}
#getPre{
left: 0px;
}
#getNext{
right: 0px;
}
.item.active{
opacity: 1;
z-index: 10;
}
.pointList{
padding-left: 0px;
list-style: none;
z-index: 10000;
position: absolute;
right: 20px;
bottom: 20px;
}
.point{
width: 8px;
height: 8px;
background-color: rgba(0,0,0,0.4);
border-radius: 100%;
float: left;
margin-right: 14px;
border-style: solid;
border-width: 2px;
border-color: rgba(255,255,255,0.6);
cursor: pointer;
}
.point.active{
background-color: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<ul class="list">
<li class="item active">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</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>
</ul>
<button type="button" class="btn" id="getPre"><</button>
<button type="button" class="btn" id="getNext">></button>
</div>
<script>
var items = document.getElementsByClassName("item");
var goPreBtn = document.getElementById("getPre");
var goNextBtn = document.getElementById("getNext");
var points = document.getElementsByClassName("point");
var time=0;//点击之后等待的秒数
var index = 0;//index 表示第几张图片在展示-->第index有action这个类名
function clearAction(){
for(var i=0;i<items.length;i++){
items[i].className='item'
}
for(var i=0;i<points.length;i++){
points[i].className='point'
}
}
//给对应的下标添加action
function goIndex(){
clearAction()
items[index].className = 'item active'
points[index].className = 'point active'
}
//点击下一张事件
function goNext(){
if(index<items.length-1){
index ++;
}else{
index=0
}
time=0
goIndex();
}
//点击上一张事件
function goPre(){
if(index==0){
index=items.length-1
}else{
index--;
}
time=0
goIndex();
}
//点击按钮触发事件
goNextBtn.addEventListener('click',function(){
goNext();
})
goPreBtn.addEventListener('click',function(){
goPre();
})
//点击point
for(var i=0;i<points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index');
console.log(pointIndex)
index=pointIndex
goIndex()
time=0;
})
}
function showTime(){
time++;
//【这里改成了2秒，方便测试看效果】
//【这里改成了2秒，方便测试看效果】
//【这里改成了2秒，方便测试看效果】
if(time==2){
goNext();
time=0
}
}
//【这里用var，作为全局变量，这样函数中依然可以操作】
//【这里用var，作为全局变量，这样函数中依然可以操作】
//【这里用var，作为全局变量，这样函数中依然可以操作】
var timer= setInterval(showTime,1000);
//当鼠标进入
var inner = document.querySelector('#wrap');
inner.onmouseover = function () {
clearInterval(timer);
};
//当鼠标退出
var inner = document.querySelector('#wrap');
inner.onmouseout = function () {
//【这里还要赋值给上面的timer，否则下一次清除不掉了】
//【这里还要赋值给上面的timer，否则下一次清除不掉了】
//【这里还要赋值给上面的timer，否则下一次清除不掉了】
timer = setInterval(showTime,1000);
};
</script>
</body>
</html>
05-12
102
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
