<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#view{
width: 1900px;
height: 412px;
border: #dedede;
position: relative;
overflow: hidden;
margin: 0 auto;
}
#banner{
width: 1900px;
height: 412px;
overflow: hidden;
position: relative;
}
#banner div{
width: 1900px;
height: 412px;
position: absolute;
top: 0;
left: 0;
display: none;
font-size: 50px;
text-align: center;
line-height: 412px;
}
#prev,
#next{
position: absolute;
font-size: 80px;
color: #dedede;
height: 412px;
width: 100px;
line-height: 412px;
text-align: center;
background: black;
opacity: 0.1;
top: 0;
cursor: pointer;
}
#prev:hover,
#next:hover {
color: white;
font-size: 100px;
}
#prev {
left: 0;
}
#next {
right: 0;
}
#btn{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -60px;
}
#btn li{
display: inline-block;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="view">
<div id="banner">
<div style="background:darkcyan">1</div>
<div style="background:green">2</div>
<div style="background:yellow">3</div>
<div style="background:blue">4</div>
</div>
<div id="prev">‹</div>
<div id="next">›</div>
<ul id="btn">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script src="MinkyTinky.js"></script>
<script>
var view = document.getElementById("view");
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var banner = document.getElementById("banner").children;
var btn = document.getElementById("btn").children;
// 设置初始样式
banner[0].style.display="block";
btn[0].style.background="orangered";
var count = 0;
// 上一张函数
function nextPage(){
btn[count].style.background="white";
ani(banner[count],"left",-1900,600);
count++;
if(count>banner.length-1){
count=0;
}
btn[count].style.background="orangered";
banner[count].style.display="block";
banner[count].style.left="1900px";
ani(banner[count],"left",0,600)
}
// 下一张函数
function prevPage(){
btn[count].style.background="white";
ani(banner[count],"left",1900,600);
count--;
if(count<0){
count=banner.length-1
}
btn[count].style.background="orangered";
banner[count].style.display="block";
banner[count].style.left="-1900px";
ani(banner[count],"left",0,600)
}
// 点击上一张，触发函数
next.onclick=nextPage;
// 点击下一张，触发函数
prev.onclick=prevPage;
// 设置小圆点
for(i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onclick=function(){
if(this.index>count){
banner[this.index].style.display="block";
banner[this.index].style.left="1900px"
ani(banner[count],"left",-1900,600);
btn[count].style.background="white";
count=this.index;
btn[count].style.background="orangered";
ani(banner[count],"left",0,600)
}else{
banner[this.index].style.display="block";
banner[this.index].style.left="-1900px"
ani(banner[count],"left",1900,600);
btn[count].style.background="white";
count=this.index;
btn[count].style.background="orangered";
ani(banner[count],"left",0,600)
}
}
}
// 每两秒自动播放下一张
var timer = setInterval(nextPage,2000);
// 鼠标移动到轮播图时，停止自动播放
view.onmouseover=function(){
clearInterval(timer);
}
// 鼠标离开轮播图，继续自动播放；
view.onmouseout=function(){
timer = setInterval(nextPage,2000);
}
</script>
</html>
网友评论