您的位置:首页 > Web前端 > JavaScript

js通过opacity属性实现(按钮)(圆点)双控制及(自动)图片轮播

2018-12-07 11:51 549 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title&
4000
gt;</title>
</head>
<style type="text/css">
.container{
width: 500px;
height: 300px;
margin:0 auto;
position: relative;
}
img{
display: block;
width:500px;
height: 300px;
position: absolute;
transition: 500ms ease-in-out;
opacity: 0;
}
button{
display: block;
width: 50px;
height: 100px;
position: absolute;
top:100px;
}
button:nth-of-type(2){
right: 0;
}
.show{
opacity: 1;
}
/* .dispear{
display: none;
} */
.li-cotainer{
width: 130px;
position: absolute;
bottom: 0;
left:100px;
font-size: 0;
}
.li-cotainer>li{
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #ffffff;
border-radius: 50%;
margin: 10px ;
}
.ls{
background: #ffffff;
border: 1px solid #FFFFFF;
/* box-shadow: ; */
}
</style>
<body>
<div class="container">
<img src="img/1.jpg" >
<img src="img/2.jpg" >
<img class="show" src="img/3.jpg" >
<img src="img/4.JPG" >
<button><</button>
<button >></button>
<div class="li-cotainer">
<li class="ls"></li>
<li></li>
<li></li>
<li></li>
</div>
</div>
<script type="text/javascript">
var btn=document.getElementsByClassName("container")[0].getElementsByTagName("button");
var imgArr=document.getElementsByClassName("container")[0].getElementsByTagName("img");
var liArr=document.getElementsByClassName("container")[0].getElementsByTagName("li");
var i=0;
// 事件执行
btn[1].onclick=right;
btn[0].onclick=left;
for(var j=0;j<liArr.length;j++){
liArr[j].index=j;
liArr[j].onmouseover=lim;
}
// 相关方法
function right(){
i=i+1;
for(var j=0;j<imgArr.length;j++){
imgArr[j].className="";
liArr[j].className="";
}
if(i>=4){
i=0;
}
imgArr[i].className="show";
liArr[i].className="ls"

}
function left(){
i=i-1;
for(var j=0;j<imgArr.length;j++){
imgArr[j].className="";
liArr[j].className="";
}
if(i<0){
i=3;
}
imgArr[i].className="show";
liArr[i].className="ls"
}
function lim(){
for(var k=0;k<imgArr.length;k++){
imgArr[k].className="";
liArr[k].className="";
}
imgArr[this.index].className="show";
liArr[this.index].className="ls";
i=this.index;
}
// 定时器设置及清除
inter1=setInterval(right,4000);
for(var t=0;t<imgArr.length;t++){
document.getElementsByClassName("container")[0].onmouseover=function(){
clearInterval(inter1);
}
document.getElementsByClassName("container")[0].onmouseout=function(){
inter1=setInterval(right,4000);
}
}
</script>
</body>
</html>

图在上一篇博文里不上传了

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: