<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.banner {
width: 600px;
height: 430px;
margin: 80px auto;
overflow: hidden;
position: relative;
border: solid 1px;
}
.imglist {
width: 430px;
margin: 0 auto;
}
.imglist a {
position: absolute;
left: 14%;
top: 0;
opacity: 0;
transition: 1s;
}
#nav .activ{
opacity: 1;
}
.a {
position: absolute;
top: 50%;
width: 42px;
height: 72px;
line-height: 72px;
background: #000000;
color: #FFFFFF;
border-radius: 2px;
font-size: 50px;
text-align: center;
cursor: pointer;
}
.left {
left: 3%;
}
.right {
right: 5%;
}
.linelist {
position: absolute;
left: 31%;
top: 92%;
}
.linelist .a-activ{
background: #FFFFFF;
}
.linelist a {
width: 24px;
height: 24px;
border-radius: 50%;
background: #000000;
display: inline-block;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="banner">
<div class="imglist" id="nav">
<a class="activ"><img src="img/1.jpg" /></a>
<a><img src="img/2.jpg" /></a>
<a><img src="img/3.jpg" /></a>
<a><img src="img/4.jpg" /></a>
<a><img src="img/5.jpg" /></a>
</div>
<a class="left a">
<</a>
<a class="right a">>
<</a>
<div class="linelist">
<a class="a-activ"></a>
<a></a>
<a ></a>
<a></a>
<a></a>
</div>
</div>
</body>
<script>
var oLeft=document.querySelector('.left');// 获取左按钮
var oRight=document.querySelector('.right');// 获取右按钮
var oImg=document.querySelectorAll('.imglist a'); // 获取图片
var oa=document.querySelectorAll('.linelist a');//获取原点
var idenx=0; //图片下标
var lastindex=0;//原点下标
var leng=oImg.length;// 图片长度
var timer=0; //定时器
//左按钮
oLeft.οnclick=function(){
chage(function(){
idenx--;
if(idenx<0)idenx=leng-1;
})
}
//右按钮
oRight.οnclick=function(){
auto()
}
function auto(){
chage(function(){
idenx++;
idenx%=leng;
})
}
function chage(callback){
//删除类名
oImg[idenx].classList.remove('activ');
oa[lastindex].classList.remove('a-activ');
//下标变化；
callback && callback();
//赋值
lastindex= idenx;
//添加类名
oImg[idenx].classList.add('activ');
oa[lastindex].classList.add('a-activ');
}
//自动
chaga()
function chaga(){
timer=setInterval(auto,3000)
}
//原点事件
for (var i=0;i<oa.length;i++) {
oa[i].index=i;
oa[i].οnclick=function(){
var oThis=this.index;
chage(function(){
idenx=oThis
})
}
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.banner {
width: 600px;
height: 430px;
margin: 80px auto;
overflow: hidden;
position: relative;
border: solid 1px;
}
.imglist {
width: 430px;
margin: 0 auto;
}
.imglist a {
position: absolute;
left: 14%;
top: 0;
opacity: 0;
transition: 1s;
}
#nav .activ{
opacity: 1;
}
.a {
position: absolute;
top: 50%;
width: 42px;
height: 72px;
line-height: 72px;
background: #000000;
color: #FFFFFF;
border-radius: 2px;
font-size: 50px;
text-align: center;
cursor: pointer;
}
.left {
left: 3%;
}
.right {
right: 5%;
}
.linelist {
position: absolute;
left: 31%;
top: 92%;
}
.linelist .a-activ{
background: #FFFFFF;
}
.linelist a {
width: 24px;
height: 24px;
border-radius: 50%;
background: #000000;
display: inline-block;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="banner">
<div class="imglist" id="nav">
<a class="activ"><img src="img/1.jpg" /></a>
<a><img src="img/2.jpg" /></a>
<a><img src="img/3.jpg" /></a>
<a><img src="img/4.jpg" /></a>
<a><img src="img/5.jpg" /></a>
</div>
<a class="left a">
<</a>
<a class="right a">>
<</a>
<div class="linelist">
<a class="a-activ"></a>
<a></a>
<a ></a>
<a></a>
<a></a>
</div>
</div>
</body>
<script>
var oLeft=document.querySelector('.left');// 获取左按钮
var oRight=document.querySelector('.right');// 获取右按钮
var oImg=document.querySelectorAll('.imglist a'); // 获取图片
var oa=document.querySelectorAll('.linelist a');//获取原点
var idenx=0; //图片下标
var lastindex=0;//原点下标
var leng=oImg.length;// 图片长度
var timer=0; //定时器
//左按钮
oLeft.οnclick=function(){
chage(function(){
idenx--;
if(idenx<0)idenx=leng-1;
})
}
//右按钮
oRight.οnclick=function(){
auto()
}
function auto(){
chage(function(){
idenx++;
idenx%=leng;
})
}
function chage(callback){
//删除类名
oImg[idenx].classList.remove('activ');
oa[lastindex].classList.remove('a-activ');
//下标变化；
callback && callback();
//赋值
lastindex= idenx;
//添加类名
oImg[idenx].classList.add('activ');
oa[lastindex].classList.add('a-activ');
}
//自动
chaga()
function chaga(){
timer=setInterval(auto,3000)
}
//原点事件
for (var i=0;i<oa.length;i++) {
oa[i].index=i;
oa[i].οnclick=function(){
var oThis=this.index;
chage(function(){
idenx=oThis
})
}
}
</script>
</html>
3963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
