您的位置：首页 > Web前端

Web前端图片轮播

2017-07-08 13:36 295 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
.show-lb{
width: 1280px;
height: 399px;
position: relative;
overflow: hidden; //超出盒子部分隐藏
cursor: pointer;
}
.show-lb:hover .btn{
display: block;
}
.btn{
position: absolute;
color: #FFFFFF;
height: 69px;
width: 40px;
font-size: 50px;
top: 150px;
border: 1px solid #FFFFFF;
background: #555555;
opacity: 0.3; //透明度0.3
cursor: pointer; //改变鼠标形态
display: none; //让盒子隐藏

}
.btnleft{
border-radius: 0 20px 20px 0; //改变盒子角为圆角
left: 0px;
}
.btnright{
border-radius: 20px 0 0 20px; //改变盒子角为圆角
right: 0px;
}
.dian{
position: absolute; //绝对定位
top: 300px;
left: 40%;
font-size: 80px;
line-height: 80px;
margin: 0 auto;
color: #FFFFFF;

}
.dian span{
width: 30px;
display: block;
float: left;
}
.dian #one{
color: coral;
}
</style>
<script>

var imgs,sps,divimg,dian;
window.onload=function(){
//获取对象
imgs = document.getElementsByTagName("img");
sps = document.getElementsByTagName("span");
divimg = document.getElementsByClassName("show-img")[0];
dian = document.getElementsByClassName("dian")[0];

var left=document.getElementsByClassName("btnleft")[0];
var right=document.getElementsByClassName("btnright")[0];

//计时器
setInterval("rightLB()",2000) //每2秒轮播一次
//左点击事件
left.onclick = function(){
leftLB();
}

//右点击事件
right.onclick = function(){
rightLB();
}

}
function leftLB(){
dian.appendChild(sps[0]); //向末尾添加新的子节点
divimg.insertBefore(imgs[imgs.length-1],imgs[0]);//方法在您指定的已有子节点之前插入新的子节点。
}

function rightLB(){

divimg.appendChild(imgs[0]); //向末尾添加新的子节点
dian.insertBefore(sps[sps.length-1],sps[0]);//方法在您指定的已有子节点之前插入新的子节点。
}
</script>
</head>
<body>

<div class="show-lb">

<div class="show-img"> //图片
<img src="img/lb_01.jpg"/>
<img src="img/lb_03.jpg"/>
<img src="img/lb_04.jpg"/>
</div>
<div class="btn btnleft"><</div> //图片轮播左按钮
<div class="btn btnright">></div> //图片轮播右按钮
<div class="dian">
<span id="one">.</span> // 图片对应的点
<span>.</span>
<span>.</span>
<span>.</span>
</div>

</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航