<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1203600570-壮-淡入淡出轮播图</title>
<style>
*{margin: 0; padding: 0;}
#container{
position: relative;
width: 850px;
height: 450px;
margin: 50px auto;
}
a img{
position: absolute;
width: 850px;
height: 450px;
vertical-align: top;
}
a{
opacity: 0;
transition: .5s;
}
a.on{
opacity: 1;
}
.dot p{
width: 30px;
height: 30px;
background:#ccc;
color: #fff;
font:20px/30px '';
box-shadow: 1px 1px 10px #000;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
/*dot*/
#container .dot{
position: absolute;
left: calc(50% - 100px);
display: flex;
justify-content: space-between;
bottom: 5px;
width: 200px;
height: 30px;
}
#container .dot p.on{
background-color: red;
}
.btn p{
position: absolute;
width: 55px;
height: 55px;
top: 50%;
margin-top: -27px;
background-color: rgba(0,0,0,.5);
cursor: pointer;
}
.btn p img{
width: 55px;
height: 55px;
}
.btn p:nth-child(1){
left: 0;
}
.btn p:nth-child(2){
right: 0;
}
</style>
</head>
<body>
<div id="container">
<div>
<a href="#" class="on"><img src="images/0.jpg"></a>
<a href="#"><img src="images/1.jpg"></a>
<a href="#"><img src="images/2.jpg"></a>
<a href="#"><img src="images/3.jpg"></a>
<a href="#"><img src="images/4.jpg"></a>
</div>
<div class="btn">
<p><img src="images/next1.png"></p>
<p><img src="images/next2.png"></p>
</div>
<div class="dot">
<p class="on">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
<script>
var oBox = document.getElementById("container");
var aBot = document.querySelectorAll(".dot p"); //获取圆点数组
var aImg = document.querySelectorAll("a"); //获取图片数组
var aBtn = document.querySelectorAll(".btn p");
var imgLength = aImg.length;
var index = 0; //索引
/*btn*/
aBtn[1].onclick = next;
aBtn[0].onclick = function(){
aImg[index].className = "";
index > 0 ? index-- : index = imgLength-1;
aImg[index].className = "on";
change();
}
/*自动轮换*/
var timer = setInterval(next,2000);
function next(){
aImg[index].className = "";
index < imgLength-1 ? index++ : index = 0;
aImg[index].className = "on";
change();
}
/*鼠标移入移出*/
oBox.onmouseenter = function(){
clearInterval(timer);
}
oBox.onmouseleave = function(){
timer = setInterval(next,2000);
}
/*圆点点击事件*/
for (var i = 0; i < imgLength; i++) {
(function(m){
aBot[m].onclick = function(){
aImg[index].className = "";
index = m;
aImg[index].className = "on";
change();
}
}
)(i)
}
/*圆点变色*/
function change(){
for(var i = 0;i < imgLength;i++){
aBot[i].className = "";
}
aBot[index].className = "on";
}
</script>
</body>
</html>
我的java全栈开发之路-1-淡入淡出轮播图
猜你喜欢
转载自blog.csdn.net/desirablelove/article/details/80460040
今日推荐
周排行